ウェブランサーMENUHOMEBLOGHTMLCSSMOBILEABOUTCSSで気をつけたいマージン(余白)とボーダー(外枠)の解釈twitterFacebookLINEはてなブックマークPocket要素の余白を指定する[margin]と[padding]、外枠を指定する[border]はそれぞれ自由に指定する事が出来ますが、要素に横幅[width]を指定した際の解釈がブラウザによって異なる場合があります。ブラウザごとの横幅、余白、外枠の解釈の違いが原因で、CSSレイアウトが上手く行かないことが良くあります。それぞれの特性を理解して、段組レイアウトやCSSデザインに対応できるようにしていきましょう。段組レイアウトや、メニューボックスをCSSで作る際に、一番厄介なのが下記の仕様です。IEでレイアウトの確認を行っていると、Firefoxなど他のブラウザで見た時に膨張してしまうのは、IE独自の解釈の仕方に問題があったのです。IEの場合は、[padding]を増やせば増やす程コンテンツ領域が圧縮されて行きます。CSS上の正しい解釈は、コンテンツ領域を確保しながら余白が膨張していきます。[border]を指定する場合も同様です。ブラウザごとに仕様が違うとなると、デザイン上1ピクセルのズレも許されない場合など、非常に厄介な問題となります。回避方法この問題の対処方法として推奨されているのは、1つの要素に対して[width]、[padding]、[border]を複数指定しない事。<div>でボックスを作るのであれば、入れ子状にした<div>にそれぞれのプロパティを指定すれば、一応この問題は解決されます。ボックス幅が固定なら枠線を背景画像にしてしまうのも一つの手段です。weblan3.com。