ウェブランサー

CSSで気をつけたいマージン(余白)とボーダー(外枠)の解釈

要素の余白を指定する[margin]と[padding]、外枠を指定する[border]はそれぞれ自由に指定する事が出来ますが、要素に横幅[width]を指定した際の解釈がブラウザによって異なる場合があります。

ブラウザごとの横幅、余白、外枠の解釈の違いが原因で、CSSレイアウトが上手く行かないことが良くあります。それぞれの特性を理解して、段組レイアウトやCSSデザインに対応できるようにしていきましょう。

正しい余白と外枠のとり方

段組レイアウトや、メニューボックスをCSSで作る際に、一番厄介なのが下記の仕様です。IEでレイアウトの確認を行っていると、Firefoxなど他のブラウザで見た時に膨張してしまうのは、IE独自の解釈の仕方に問題があったのです。

IEの場合は、[padding]を増やせば増やす程コンテンツ領域が圧縮されて行きます。しかし、CSS上の正しい解釈は、コンテンツ領域を確保しながら余白が膨張していきます。[border]を指定する場合も同様です。ブラウザごとに仕様が違うとなると、デザイン上1ピクセルのズレも許されない場合など、非常に厄介な問題となります。

回避方法

この問題の対処方法として推奨されているのは、1つの要素に対して[width]、[padding]、[border]を複数指定しない事。例えば<div>でボックスを作るのであれば、入れ子状にした<div>にそれぞれのプロパティを指定すれば、一応この問題は解決されます。ボックス幅が固定なら枠線を背景画像にしてしまうのも一つの手段です。

HTML
<div style="width:200px;">
<div style="border:1px solid #333333; padding:10px;">
コンテンツ領域コンテンツ領域
コンテンツ領域コンテンツ領域
</div>
</div>

CSSリファレンス

CSSって何? 初めての方はこちらからお読み下さい
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます