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

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を移動すると余白が変わるのは別の人が修正した時に対応が大変なので避けておくべきです。

西部俊宏
執筆者:
株式会社Webの間代表取締役。上場企業でのSEOの実績やWebサイト構築実績多数。SEO・Web制作の経験からクローラビリティ改善・最適化サービスを提供している。
著者によるサービスについて

売上アップに繋がる本気のユーザーをホームページに呼び込みませんか?

※当ブログはブログ村に参加しております。
にほんブログ村