CSS Radar

Box ModelバグFix - Tips

ピクセル単位で正確なレイアウトをCSSで実現するために

Box Modelについてすでに3回目のエントリになったが、CSSでのレイアウト構築ではもっとも重要な概念なので、何度繰り返しても多すぎることはないだろう。

今回は究極のBox ModelバグFixを紹介しよう。

CSSの説明
Divを繰り返すことになるが、
親となるブロック要素にはWidthのみを指定し(1行目)、
子要素で、border、padding、marginのみを指定(５,6行目)

この様に指定してしまえば、すべてのブラウザでBox Modelが
正しく動作することになる。

HTMLにて#header、#main、#sidebar、#footerというような、
構造を持っている場合、それらのブロック要素では、今回紹介したように
paddingなどの指定をしないことをオススメする。

#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}