[CSS] ボックスモデルでのサイズ決定方法：width、heightとborder、paddingの関係

2015 年 4 月 12 日

HTMLにおけるdivなどのブロック要素では、width、heightのサイズ指定した値にborderとpaddingを足し合わせたものが、実際の表示上のサイズになる。

横幅の計算方法：

表示上の横幅＝width＋border×2＋padding×2

要は、width、heightによるサイズ指定はデフォルトで、borderとpaddingに囲まれた内部の領域のサイズを示すということになる。

そのため、表示上のサイズをきちんと一定にしたい場合は、borderやpaddingをCSS2までは自分で計算する必要があった。

/* 見た目上の幅を100pxにしたい場合 */
div.sample{
	border-width: 2px;
	padding: 3px;
	width: 90px; /* 100 - 2 x 2 - 3 x 2 */
}

ただし、CSS3では「box-sizing」プロパティで「border-box」を指定すれば、width、heightで見た目上のサイズを指定したことになる。

/* 見た目上の幅を100pxにしたい場合 */
div.sample2{
	border-width: 2px;
	padding: 3px;
	box-sizing: border-box;
	width: 100px;
}

Contents

上記のような仕様のため、ボックスモデルでの子要素においてauto、100%でサイズ指定した場合に挙動に差が出る。

実は、具体的に挙動が定められているわけではない。各ブラウザに処理を委ねることを示す。

この場合は単純。子の側のwidth、heightでauto、100%のどちらを指定しても挙動＝表示は同じになる。

デザイナーのイメージと実際の挙動が異なるので注意が必要。

デフォルトの指定なので特に問題はない。

大半の場合、親のwidth、heightに自身のborder＋paddingのサイズの2倍を足した分が、「自動的に」子の見た目上のサイズになる。

よって、余計な指定をしないかぎり、レイアウトが崩れることはめったにない。

autoと似ているが、問題になるのはこちら。子のbox-sizingの指定によって挙動が変わってくる。

%指定の場合、親のサイズからの相対的な割合となるが、子の側で「box-sizing: border-box;」を指定しないと、上記のように子自身のborderとpaddingを含まないサイズになる。

自身のborderとpaddingを含まないということは、実際の＝見た目上のサイズが常にwidth、heightの指定より大きくなる。

aaa

bbb

そのため、100%指定に限らず、親のwidth、heightより大きいサイズを指定した場合、positionプロパティなどの設定によってはレイアウトが崩れてしまう原因になる。

難しく考える必要はない。border（枠線）やpadding（内部余白）を含んだ分をwidth、heightで指定したい場合は「box-sizing: border-box;」を使い、そうではなく内部のサイズを指定したい場合はデフォルトの間までいいということ。

Posted by takasho