仕様

プロパティpadding
値<length-percentage>{1,4}
補足： <length-percentage> = <length> | <percentage>
一括/個別一括指定プロパティ
個別： padding-top, padding-right, padding-bottom, padding-left
初期値0
適用対象「表のセル以外の内部テーブル要素、ruby base containers and ruby annotation containers」を除くすべての要素
継承なし
百分率包含ブロックの論理幅を参照
計算値計算された<length-percentage>値
メディアvisual
paddingプロパティは、要素の上下左右のパディングを一括して設定します。

paddingプロパティは、要素のパディングの上(padding-top), 右(padding-right), 下(padding-bottom), 左(padding-left)の値を単一の宣言で設定する一括指定プロパティです。
順番に意味があり指定する数にも意味があります。

上, 右, 下, 左で一部を初期値などにしたい場合は、
padding-top, padding-right, padding-bottom, padding-left 等を用います。
値は上, 右, 下, 左に個別に１つ指定という数の違いがあるだけで、他は padding と同じ規則です。

  1. .cdvSample100 > div { outline: solid 1px black; padding: 3em 2em 4em 1em; }
  2. .cdvSample100 > div > div { outline: dotted 1px blue; }
  1. <div class="cdvSample100">
  2. <div>
  3. <div>パディング</div>
  4. </div>
  5. </div>
パディング
参照元
  1. CSS Level 2 W3C 勧告. 8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'
  2. CSS Level 1 W3C 勧告. 5.5.10 'padding'
  3. padding - CSS: カスケーディングスタイルシート | MDN

値の数

  1. cdvSample120 > div { outline: solid 1px #0000ff; }
  2. cdvSample120 > div > div { outline: dashed 1px currentColor; }
  1. <div class="cdvSample120">
  2. <div style="padding: 1em;"><div>例</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
子要素はパディングを視覚化する為に記述しています。

例
  1. padding: 1em 2em 3em 4em;

値を４つ指定しました。値は 上，右，下，左 で設定されます。

例
  1. padding: 1em 2em 3em;

値を３つ指定しました。値は 上，左右，下 で設定されます。

例
  1. padding: 1em 2em;

値を２つ指定しました。値は 上下，左右 で設定されます。

例
  1. padding: 1em;

値を１つ指定しました。値は 上下左右 で設定されます。

例

<length> 値

  1. cdvSample120 > div { outline: solid 1px #0000ff; }
  2. cdvSample120 > div > div { outline: dashed 1px currentColor; }
  1. <div class="cdvSample120">
  2. <div style="padding: 1em;"><div>例</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
子要素はパディングを視覚化する為に記述しています。

例
  1. padding: 1em;
  2. font-size: 2em;

単位 em の値を指定しました。em は、font-size の計算値を用います。

例
  1. padding: 1.6rem;
  2. font-size: 2em;

単位 rem の値を指定しました。rem は、ルート要素のfont-size の計算値を用います。
この例ではルート要素には、font-size: 62.5%; を指定しています。

例
  1. padding: 16px;
  2. font-size: 2em;

単位 px の値を指定しました。px は、1 ピクセルです。
(ブラウザなどの環境で文字サイズ 16px を想定しての表示例です。)

例
  1. padding: 1vw;
  2. font-size: 2em;

単位 vw の値を指定しました。vw は、ビューポートの初期値の包含ブロックにおける幅の1%と同じです。

例

<percentage> 値

  1. cdvSample140 > div { outline: dashed 1px #0000ff; width: 10em; }
  2. cdvSample140 > div > div { outline: solid 1px #0000ff; width: 6em; }
  3. cdvSample140 > div > div > div { outline: dashed 1px currentColor; }
  1. <div class="cdvSample140">
  2. <div> <div style="padding: 1em;"><div>例</div></div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
子要素はパディングを視覚化する為に記述しています。

例
  1. padding: 20%;

単位 % の値を指定しました。% は、包括要素の幅 (width) に対しての割合です。

例

CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(margin-top, margin-right, margin-bottom, margin-left)を使用して設定します。

  1. cdvSample150 > div { outline: dashed 1px #0000ff; padding: 1em; }
  2. cdvSample150 > div > div { outline: solid 1px #0000ff; }
  3. cdvSample150 > div > div > div { outline: dashed 1px currentColor; }
  1. <div class="cdvSample150">
  2. <div> <div style="padding: 1em;"><div>例</div></div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
子要素はパディングを視覚化する為に記述しています。

例
  1. padding: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

例
  1. padding: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。padding プロパティの初期値は 0 です。

例
  1. padding: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。padding プロパティは非継承プロパティなので初期値の 0 を設定します。

例