HTML・CSSテックラボ

box-sizingを使って padding や border を含めた横幅指定

デフォルトだと width で指定した横幅には padding や border が含まれないので、例えば padding が10ピクセルで横幅300ピクセルのボックスを用意したいとき、左右の padding を引いた値(280ピクセル)を横幅として指定する必要があります。
上記程度であれば少々不便でも対応できますが、例えば横幅100%でpaddingを10ピクセルとしたい場合、パーセントからピクセルを引くことはできないため、対応できません。

そのような時、box-sizing に border-box を指定することにより、width の値に padding や border が含まれるようになります。

必要な個所だけ指定するより全要素に指定したほうが管理しやすいので、下記のような指定をすると便利です。

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

※box-sizingはIE8以上であればベンダープレフィックス不要です。

関連記事