marginの相殺、paddingの活用とCSSボックスモデル

全てのHTMLタグはそれぞれパディング（padding）・ボーダー（border）・マージン（margin）と3種類の領域を持っています。これをボックスモデルと言います。それぞれの領域を正しく理解することはCSSの基本となります。

paddingについて

余白にはpaddingとmarginがあります。paddingのコンテンツの内側の余白です。

borderについて

borderはpaddingとmarginの間にある領域です。borderはその名の通り線を意味します。ただし、borderを透明状態で設定することもできます。透明なborderはpaddingと同じ挙動となります。

marginについて

marginはコンテンツの外側の余白です。線で囲んだ要素同士に余白を設ける場合はmarginを設定します。それをイメージするとわかりやすいでしょうか。また、marginはpaddingと違い、margin同士を並べると相殺が起こります。

marginは相殺があるがpaddingにはない

marginの相殺とは並んだ要素にそれぞれmarginを設定すると大きい方の設定が適用されます。それぞれのmarginを合計した空き量とはなりません。この点注意が必要です。

marginの相殺は要素間の設定内容で決まるため、コンテンツを移動した場合に予期せぬ空き量となる可能性があります。また、paddingには相殺がないため、余白の設定はpaddingを中心に行うとわかりやすいです。もちろんborderがある要素の場合はmarginを使用します。

余白は一方から設定するとわかりやすい

marginの相殺は下marginと上margin、右marginと左marginというと両方から余白の設定をすると生じます。そのため回避策としては余白を一方から設定すると相殺が起きません。もちろんborderありの要素に余白を設ける場合は上下左右にpaddingを指定する必要があるので、必ずしも一方からの余白設定とはなりませんが。

• 余白はmarginよりもpaddingを使用する
• 余白の指定は上から下、左から右と一方から行う

このようにルール化することで後工程での修正がわかりやすくなります。HTMLを移動すると余白が変わるのは別の人が修正した時に対応が大変なので避けておくべきです。