

プロパティについて
概要
初期値 | “padding: 0;” |
適用対象 | セル以外のテーブル内部要素とルビ・ベース・コンテナとルビ・アノテーション・コンテナを除くすべての要素 |
継承 | No |
パーセント値 | 内包される包括ブロックのインライン軸方向の大きさを“100%”とする |
計算値 | 一括指定が対象とする各プロパティの定義に依る |
アニメーション | 一括指定が対象とする各プロパティの定義に依る |
“padding”プロパティは要素の境界線の内側の余白を指定する以下のプロパティの一括指定プロパティです。

既定では“padding”プロパティで指定される余白は“width”プロパティと“height”プロパティでサイズが指定されるコンテント・ボックスよりも外側に配されます。
“box-sizing”プロパティの値を“border-box”を指定すると“width”プロパティと“height”プロパティで指定される大きさをパディングとボーダーを含めた大きさにすることができます。
境界線の内側の余白を一方向ずつ指定するには“padding-top”プロパティ、“padding-right”プロパティ、“padding-bottom”プロパティ、“padding-left”プロパティを使用します。
サンプルコード
div { padding: 10px 10px 10px 10px;}
値の指定方法
余白の大きさは“px”、“em”などで指定した長さ、もしくはその要素を内包するブロックのインライン軸方向の大きさに対するパーセンテージで指定します。
値が1つの場合は4つすべての方向の余白となります。
div { padding: 〚余白の大きさ〛;}
また、複数の値をホワイトスペースで区切って記述することができます。値の個数によってそれぞれの値が対応する方向が変わります。
- 2つの場合は1つ目の値が上下、2つ目の値が左右の余白に適用されます。
- 3つの場合は1つ目の値が上、2つ目の値が左右、3つ目の値が下の余白に適用されます。
- 4つの場合は1つ目の値が上、2つ目の値が右、3つ目の値が下、4つ目の値が左の余白に適用されます。
padding: 〚すべての方向〛;
padding: 〚上下〛 〚左右〛;
padding: 〚上〛 〚左右〛 〚下〛;
padding: 〚上〛 〚右〛 〚下〛 〚左〛;
仕様書
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'
CSS Box Model Module Level 3
Padding|Padding Shorthand: the padding property
CSS Box Model Module Level 4
Padding|Padding Shorthand: the padding property
使用例
境界線の内側の余白を指定する
“<length>”値で指定する
div { padding: 20px 20px 20px 20px;}
div { padding: 20px;}
“<percentage>”値で指定する
div { padding: 10%;}
それぞれの方向の余白を指定する
div { padding: 10px 20px 30px 40px;}
div { padding: 10px 40px;}
div { padding: 0px 10px 40px;}