【CSS】widthが大きくなってしまう！paddingやborderに左右させずに要素のサイズを指定する方法

要素に余白、枠線を指定した要素にwidth、heightを指定すると、
デフォルトではpaddingやborderの幅を加算したサイズで表示されます。
例えるなら100pxのwidthを指定した要素にpaddingが全方位20pxがある場合、
左右分の40pxを加えた140pxが実際のサイズとなります。

この縦横幅に指定した値に余白や枠線のサイズを加算させないようにする方法を紹介します。

指定なし<br />
<div class="box">
	<p>padding: 20px;<br />border: 10px solid #666;</p>
</div>

box-sizing: border-box;<br />
<div class="border-box">
	<p>padding: 20px;<br />border: 10px solid #666;</p>
</div>

.box {
	width: 300px;
	background: #ededed;
	padding: 30px;
	border: 20px solid #666;
}
.border-box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;

	width: 300px;
	background: #ededed;
	padding: 30px;
	border: 20px solid #666;
}

box-sizing に border-box を指定します。

余白も線も関係なく幅がセットされました。