余白の指定 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>など文章中で使うインライン要素には使うと、ブラウザごとに余白の取り方が違うので、読みづらくなることがある。
また縦割りのレイアウト（このページもそう）で利用すると、ブラウザによって大きくずれる原因にもなる。これはブラウザによって余白の取り方が違うため。
