【Labs】CSS3のプロパティ box-sizing 値 border-boxでレイアウトの計算が簡単に

こんにちは（・∀・）

今日はレイアウトする際に使うと便利なCSS3のbox-sizingプロパティの使い方についてご紹介して行きます。

box-sizingプロパティに関しての解説ページはこちらをご覧ください。
【CSS3リファレンス】box-sizing

またflexboxでレイアウトする方法に関しての解説ページはこちらをご覧ください。
【labs】display:flexについて

box-sizingプロパティ

box-sizingプロパティで指定できる値はcontent-boxとborder-boxの2種類です。

content-boxを指定した場合paddingとborderの大きさは含まないで表示します。要素内容の大きさはwidthで指定したままの大きさで表示され、外側が大きくなります。

border-boxを指定した場合paddingとborderの大きさを含んで表示します。なので要素内容が小さくなります。

今までレイアウトする際、本体要素にborderやpaddingが指定してある場合、本体要素の値だけではなくborderとpaddingの値も足して計算しておりましたが、このbox-sizingプロパティで値がborder-boxを指定した場合、本体要素の値以外は気にしなくてもよくなります。ただし、marginは除きます。

サンプル

HTML

<div class="box">
<p>box-sizingの指定なし。</p>
<!--box--></div>
<div class="content-box">
<p>box-sizing:content-boxで指定するとpaddingとborderの値も含みます。上記のbox-sizingの指定なしと同じ表示になります。</p>
<!--content-box--></div>
<div class="border-box">
<p>box-sizing:border-boxで指定するとpaddingとborderの値は含みません。</p>
<!--border-box--></div>

CSS

.box,
.content-box,
.border-box {
  width: 700px;
  border: 10px solid #ccc;
  margin: 10px auto;
  padding: 10px;
  text-align: left;
}
.content-box {
  box-sizing: content-box;
}
.border-box {
  box-sizing: border-box;
}

Result

サンプルデモ
スマホでの確認はこちら

また次の指定をリセットCSSで最初に設定しておけばborderとpaddingの幅を気にすることなくコーディングすることができるのでオススメです。

* {
  box-sizing: border-box;
}

box-sizing:border-boxを指定するとborderとpaddingは要素に含まれますがmarginは含まれませんのでご注意ください。

関連リンク

【CSS3リファレンス】box-sizing
【Labs】display:flexについて