HTML、CSSでコーディングしていると、要素からはみ出してしまう現象に出会うと思います。

今回は「要素からpadding部分がはみ出てしまう」「線がはみ出てしまう」といった問題をbox-sizingで解決する方法を紹介します。

 

1. box-sizingとは？

「要素の幅（width）と高さ（height）の中にpaddingとborderを含めるかどうか」という設定ができます。

 

1-1.box-sizingで指定する3つの値

box-sizingでは以下の3つの値を指定できます。

• box-sizing: content-box;
  →初期値。 paddingとborderを幅と高さに含めない
• box-sizing: border-box;
  →paddingとborderを幅と高さに含める
• box-sizing: inherit;
  →親要素のborder-boxの値を引き継ぐ

 

1-2. 値がcontent-boxの場合

paddingとborderを幅(width)と高さ(height)に含めない

box-sizing: content-boxは初期値です。何も指定をしていないときは、この値を取っています。

要素が作り出す幅は、width + padding + borderの太さ + marginになります。pxでwidthやpaddingを指定する分にはこれでも別に良いのですが、問題はレスポンシブデザインのために%で指定するときです。

 

content-boxの欠点の話

marginを左右で30%に、paddingを左右で30%に、widthを40%に、などとして要素の作る幅を計100%にすれば、親要素にピッタリとはまっていい感じになるわけですね。しかし計100%にするためには、一部の値だけをpx指定にするわけにはいきません。paddingだけ10pxにしたら計100%にできなくなってしまいます。

box-sizing: content-boxの状態で%指定したときに、問題になるのはborderの太さを指定しているときです。borderの太さは%指定ができません。

 

1-3. 値がborder-boxの場合

paddingとborderを幅(width)と高さ(height)に含める

width: 50pxと決まっているなら、paddingとborderもその50pxの中に含まれるようになります。

そのため、線（border）とpaddingをどれだけ大きくしても、要素の大きさ（widthとheight）は変わりません。

 

border-boxはレスポンシブデザインで便利

border-boxは幅や余白を%で指定したいときに便利です。%指定はレスポンシブデザインデザインを作るうえでは欠かせません。

その理由は「親要素にピッタリはまりやすくなるから」です。言い換えると横の%合計を100%にしやすくなるのです。

 

3. border-boxを全ての要素に適用する方法

レスポンシブデザインのウェブサイトを作るのであれば、全ての要素をあらかじめbox-sizing: border-boxにしておくと楽でしょう。

具体的にはCSSに以下のように書いておきます。セレクタに*（アスタリスク）を使うと「全ての要素に対して適用させる」という意味になります。
合わせて疑似要素に対しても合わせて指定しておくのが良いでしょう。

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}