Top > Lecture > JouhouC2010 > 7th > padding
AND OR

内容のまわりの空間の設定

内容のまわりの空間部分の大きさを設定するには、 padding-???プロパティを設定します。

padding-top: 上の空間部分
padding-bottom: 下の空間部分
padding-left: 左の空間部分
padding-right: 右の空間部分
padding: 上下左右の空間部分
ボックスの構造

空間部分の大きさは、次の設定ができます。

  • %: ボックスの横幅に対する割合
  • 単位つき数値: 10px、1.5emなど

paddingプロパティを使えば、 上下左右の空間部分を一度に指定できます。 その場合は、値を半角スペースで区切ります。 値の個数によって、次のように空間部分が設定されます。

  • 値が1つ: 「上下左右」を指定
  • 値が2つ: 1つ目の値は「上下」、2つ目の値は「左右」
  • 値が3つ: 1つ目の値は「上」、2つ目の値は「左右」、3つ目は「下」
  • 値が4つ: 1つ目の値は「上」、2つ目の値は「右」、3つ目は「下」、4つ目は「左」
h2{
  padding-left: 10px;
  padding-right: 20px;
}
h3{
  padding: 10%;
}


次へ進んでください。



Reload   Diff   Front page List of pages Search Recent changes Backup Referer   Help   RSS of recent changes
Last-modified: Tue, 11 Mar 2014 02:20:22 HADT (3752d)