1. トップページ >
  2. コーディング関連情報 >
  3. コーディングコラム >
  4. CSSレイアウトのコツ1 ~widthとpaddingを同時に記述しない~

コーディングコラム

CSSレイアウトのコツ1 ~widthとpaddingを同時に記述しない~

CSSレイアウトにっとってクロスブラウザは無視できない問題です。記述によってはIE7とIE6の間にもCSSの解釈に違いが見られ、MacIEなどの旧ブラウザに泣かされた人は少なくないはず。そこで、CSSレイアウトでのクロスブラウザ対策のちょっとした工夫を紹介します。

まずは下記の例を見てください。

HTML

<div>
 <p>テキスト</p>
</div>

CSS

div{
 width:200px;
 padding-left:20px;
}

上記のようにwidthとpaddingを指定すると、IEでは200ピクセルで表示されますが、Firfoxではwidth+paddingの220ピクセルで表示されてしまいます。widthとborderの場合も同様の表示になってしまいます。そこで一手間かけます。

CSS

div{
 width:200px;
}
div p{
 padding-left:20px;
}

上記のようにwidthとpaddingを分けて記述すればどのブラウザでも同じ幅で表示されます。これはdivボックスを入れごにする場合も同じことが言えます。

今回のポイント
width(height)と左右(上下)paddingの指定を同時にしない