CSS3のbox-sizingがいい！

隣り合う要素や親要素のパラメータを考慮し、ちまちま計算していた時代は終わっていました。

paddingやborderのサイズに依存しないwidth,heightの指定方法。

box-sizing

CSSの基本的な考え方として各要素は、ボックスモデルと呼ばれる要素の周囲を取り囲む矩形領域で構成されます。ボックスモデルについては、大きく変わっていないようですので「CSSで重要なボックスモデル」を参照してください。

それではCSS3のbox-sizingについて見ていきます。

要素にwidthやheightと同時にborderやpaddingを指定したとき、意図しない表示になった事は無いでしょうか？ボックスが1つの場合は、それほど気になりませんがボックスが隣り合う場合などレイアウトが崩れてしまうことがあります。これは、ボックスサイズの算出にpaddingやborderのサイズを考慮し全体的な配置を計算する必要があるからです。

例えば、「少しborderを太くしたい」といっただけでレイアウトが崩れたりすることがあります。

例として、要素に次のようなスタイルを設定すると各プロパティの値は、図のように判断されます。

div {
    width : 100px;
    height : 100px;
    padding : 20px;
    border : 30px solid #FFAA22;
    margin : 50px;
}

上記設定の場合、ボックスの大きさはwidth 又は height + padding + borderということになります。 marginについては、上下のmarginと左右のmarginでは影響の仕方が変わってくるため、ここではmarginを考えない状態で進めていきます。

次にbox-sizing : border-boxを設定した場合を見てみます。

div {
    box-sizing : border-box;
    width : 100px;
    height : 100px;
    padding : 20px;
    border : 30px solid #FFAA22;
    margin : 50px;
}

box-sizing : border-boxを指定した場合、widthの100pxにpaddingとborderが含まれることになり、 コンテンツ部分は50pxのwidthとなります。

box-sizingを使うことでレイアウトに影響する要素が減ることから次のようにスタイルを設定しておくと よいかもしれません。

*, *:before, *:after {
    box-sizing: border-box;
}

box-sizingに指定できる値