CSSレイアウト崩れの原因 - ブラウザによる「padding」の解釈の違い

この場合、幅の指定「width」と一緒に、ボックス内側の余白をしている「padding」が指定されていることが多くあります。

widthとpaddingが同時に指定されると崩れが出てしまうのは、ブラウザによって解釈が異なるためです。

 

 

 

例えば、width:500px、padding:10pxと指定した場合、FirefoxやIE7ではボックスの幅は変わらずに内側に余白を設けるため、ボックス内側の有効幅が小さくなる（幅500－左10－右10＝有効幅480px）のに対し、IE6では内側に余白を設けた分だけボックスの幅を広げる（有効幅500＋左10＋右10＝ボックス幅520px）よう解釈されています。

このため、同じIEでもバージョン6と7とで見え方が違う＝崩れが生じてしまうことになります。

崩れのないよう余白を指定したい場合は、margin（外側の余白を指定）を使用するか、divタグを入れ子にし、内側のDIVタグにpaddingを指定するなど、widhtとpaddingを同じボックスで指定しないよう、注意しましょう。