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

HP制作 WEBサイト

css_box_sizing

要素に余白、枠線を指定した要素に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 を指定します。

css_box_sizing_sample01

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

HP制作 WEBサイト

関連記事