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

ブラウザによってpaddingが指定されたボックスの表示が異なる。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

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

「メインスペース+サイドバーの幅が外枠の幅を超えると崩れる」ということは「パーツの合計幅が外枠よりも大きい」で説明しましたが、正しく幅が設定されていても崩れてしまうことがあります。

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

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

ブラウザによる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を同じボックスで指定しないよう、注意しましょう。