余白の指定 CSS padding:

せんせい

余白を調整する。マージンと混同しがちなので、余白とマージンの違いを確認しておくといいぞ。

余白を指定する

余白を調整するにはpadding:を利用する。値の単位には px em ptなどが利用できる。

padding: 上 下 右 左

上下左右が同じならまとめて指定もできる。

padding: 10px

余白のサンプル

h1 { padding: 5px 10px 5px 10px; }
見出し<h1>の余白を上5px 右10px 下5px 左10px あける。

p { padding: 1em; }
段落<p>の余白を上右下左1em あける。

余白はほとんどの要素に割り当てることができるけれども、<a>や<strong>など文章中で使うインライン要素には使うと、ブラウザごとに余白の取り方が違うので、読みづらくなることがある。

また縦割りのレイアウト(このページもそう)で利用すると、ブラウザによって大きくずれる原因にもなる。これはブラウザによって余白の取り方が違うため。