スタッフブログ

33 枠線の内側に余白を作るpaddingプロパティ

2014/04/15 HTML

paddingプロパティ

これまでに作ったサンプルでは、h1要素の枠線と内側にあるテキストがくっついて表示されているはずです。paddingプロパティを使用すると、枠線とテキストの間に余白を作って間隔を空ける事が出来ます。内側の余白の事をパディングと言います。
パディングの値の指定には「px」や「%」が使えますが、ここでは基本の「px」を使って説明していきます。

paddingプロパティ1

たとえば、h1要素を5pxの枠線で囲んで、その枠線とテキストの間隔を30pxにする場合は以下のように記述します。

paddingプロパティ2

HTMLファイルを上書き保存してブラウザで開くと、h1要素の枠線とテキストの上下左右の間隔が30px分空いて表示されます。

paddingプロパティ3

ここまでは分かりやすいように枠線を表示して説明してきましたが、枠線が目に見えてなくても、要素の回りには太さが0pxの枠線が存在しているので、枠線を表示させずにpaddingを設定しても、ちゃんとpaddingは反映されています。

上下左右でパディングの指定を変える

上下左右で個別にパディングを指定する場合は、

  • padding-topプロパティ(上)
  • padding-rightプロパティ(右)
  • padding-bottomプロパティ(下)
  • padding-leftプロパティ(左)

を使用します。各プロパティで使用出来る値は、paddingプロパティと同じです。

このページのまとめ

  • paddingプロパティを使用すると、枠線とその中にある要素の間隔を空けることが出来る。
  • 値の指定には、「px」や「%」を使用するが、基本的には「px」を使って指定する。
  • 枠線は必ずしも表示されている必要は無く、見えなくてもパディングの指定はちゃんと反映されている。

本間 隆之が書いた記事

新着情報

スタッフブログ

ご相談・
お問い合わせ