box-sizing: border-boxの使い方

box-sizingとは

box-sizingは、CSSのプロパティのひとつです。要素の高さや幅を指定したときに、paddingとborderを含めるか否かを指定します。それだけではイメージがしづらいと思うので、具体的に説明していきます。

content-boxとborder-box

• content-box
  デフォルト。要素の大きさにpaddingとborderを含めない。
• border-box
  要素の大きさにpaddingとborderを含める。

次のような感じです。

.content-box {
  background-color: lightgray;
  height: 200px;
  width: 300px;
  padding: 0 20px;
  border: 10px solid black;
  box-sizing: content-box;
}

.border-box {
  background-color: lightgray;
  height: 200px;
  width: 300px;
  padding: 0 20px;
  border: 10px solid black;
  box-sizing: border-box;
}

box-sizingプロパティ以外は全く同じですが、border-boxの方が小さくなりました。

図にするとこんな感じになってます。

どちらもwidth: 300pxと指定していますが、content-boxでは要素の中身が300pxなのに対し、border-boxではpaddingとborderまで含めて300pxになっています。

ちなみに、図では横幅だけに注目していますが、もちろん縦も同様です。

何の意味があるのか

どっちでも良いように感じますが、大きさを%で表したいときにborder-boxの方が便利です。

例えば下のようにすると、borderの10pxの分だけ親要素からはみ出してしまいます。

.box {
width: 60%;
height: 60%;
padding: 10%;
margin: 10%;
border: 5px solid black;
}

borderの10pxの分が親要素の何％に当たるか計算して…なんて絶対嫌ですよね。
その上、paddingはpxで指定したい、となるとなおさら親要素のサイズに合わせるのが難しくなります。

そういうときにborder-boxにしておくと、widthとmarginで100%にすれば良いので、paddingやborderを気にする必要がなくなって便利です。

まとめ

• box-sizingプロパティは、要素の大きさにpaddingとborderを含めるかを指定する
• content-boxではpaddingとborderを含めない
• border-boxではpaddingとborderを含める
• サイズを％で指定したいときに役立つ