ボックスのパディングの幅をまとめて指定する

padding

{ padding 【 パディング 】 : -top -right -bottom -left; }

paddingプロパティは、ボックスの内側の余白（パディング）の幅をまとめて指定するショートハンドです。

初期値 各プロパティに準じる
継承 なし
適用される要素 displayプロパティでtable-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-columnが指定された要素を除くすべての要素
モジュール CSS basic box model

値の指定方法

指定できる値はpadding系プロパティと同様です。値は半角スペースで区切って4つまで指定でき、それぞれ上辺、右辺、下辺、左辺に適用されます。省略した場合は以下のような指定になります。

  • 値が1つ　すべての辺に同じ値が適用されます。
  • 値が2つ　1つ目が上下辺、2つ目が左右辺に適用されます。
  • 値が3つ　1つ目が上辺、2つ目が左右辺、3つ目が下辺に適用されます。
div {
  padding: 10px;
}

サンプルコード

上の例で指定したpaddingプロパティは、各プロパティを以下のように指定した場合と同様の表示になります。

div {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

関連記事