Learning site for website creation

最終更新日から1年以上経過しています

幅の計算が楽になるbox-sizing

  • 投稿日:2014年04月11日
  • 更新日:2014年04月12日

box-sizing

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

CSS3 Box-sizing のブラウザ対応状況

box-sizingの値

content-box
padding, border, margin を幅(width)と高さ(height)に含めない(初期値)
box_sizing01
border-box
padding, borderを幅(width)と高さ(height)に含める
box_sizing02
inherit
親要素の値を継承

コンテンツ幅の計算

Webページのレイアウトをしている時、幅の計算は以下のようにするので結構面倒です。

width + 左右padding + 左右border + 左右margin = コンテンツの幅

特にスマホサイトで左右paddingの入ったコンテンツを横幅いっぱいに表示しようものなら発狂ものです。
試しに以下のようなコードで試してみます。

HTML

<div class="box">
	<div class="main">
		<p>
			サンプルテキストサンプルテキストサンプルテキスト
			サンプルテキストサンプルテキストサンプルテキスト
			サンプルテキストサンプルテキストサンプルテキスト
		</p>
	</div>
</div>

CSS

.box {
  width: 300px;
  background-color: rgba(255, 0, 0, .3); /* 背景色:赤 */
}
.main {
  padding: 10px;
  width: 100%;
  background-color: rgba(0, 255, 0, .3); /* 背景色:緑 */
}

表示結果

サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト

widthの100%(300px)に左右paddingが10pxずつプラスされてはみ出てしまう・・・。

box-sizing に border-box を指定

そんな時にbox-sizing。このプロパティの値にborder-boxを指定すると「コンテンツ領域(本来のwidth)+ 左右padding + 左右border = width」として扱ってくれます。すごい便利!

HTML

<div class="box">
	<div class="main">
		<p>
			サンプルテキストサンプルテキストサンプルテキスト
			サンプルテキストサンプルテキストサンプルテキスト
			サンプルテキストサンプルテキストサンプルテキスト
		</p>
	</div>
</div>

CSS

.box {
  width: 300px;
  background-color: rgba(255, 0, 0, .3); /* 背景色:赤 */
}
.main {
  padding: 10px;
  width: 100%;
  background-color: rgba(0, 255, 0, .3); /* 背景色:緑 */
	-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の値として指定できるので変な計算をしなくてもピッタリ収まって一安心。
スマホサイトはwidthに100%をよく使うので、このプロパティ大活躍です。