CSS3

：

プロパティ

：

padding-top、padding-right、padding-bottom、padding-left

　編集：2022.07.14 by T.A.

→●、mdn（padding-top、padding-right、padding-bottom、padding-left）

余白（上／右／下／左）。

名前 padding-top、
padding-right、
padding-bottom、
padding-left
値 <length-percentage>
初期値 0
適用対象 次に挙げるものを除く、すべての要素：
table-cell 以外の内部テーブル要素、 ルビ基底コンテナ、 ルビ注釈コンテナ
継承 されない
百分率 包含ブロックの論理横幅を基準にする
算出値 算出された <length-percentage> 値
正準的順序 文法に従う
アニメーション型 算出値の型による

これらのプロパティは、挙げられた順に、ボックスの［上端、右端、下端、左端］パディングを設定する。

<length-percentage> ○ 
開始<SPAN style="border:1px solid red;
 padding-top:5px;
 padding-bottom:10px;
">テスト</SPAN>終了


開始<SPAN style="border:1px solid red;
 padding-top:5%;
 padding-bottom:50%;
">テスト</SPAN>終了
¶パーセンテージの基準がわからない。 

<DIV style="border:1px solid black;
 width:200px; height:100px;
">
 開始<SPAN style="border:1px solid red;
  padding-top:5%;
  padding-bottom:50%;
 ">テスト</SPAN>終了
</DIV>
¶パーセンテージの基準がわからない。 

<DIV style="border:1px solid black;
 width:200px; height:100px;
">
 開始<DIV style="border:1px solid red;
  padding-top:5%;
  padding-bottom:50%;
 ">テスト</DIV>終了
</DIV>
¶パーセンテージの基準がわからない。

各種パディング プロパティに対する負な値は妥当でない。

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：