box-sizingプロパティについて

はじめに

box-sizingプロパティについて、初心者向けに備忘録としてまとめてみました。

何の為に指定するのか

box-sizingを指定する事でボックスの高さ（height）と幅（width）の算出方法を変更することが出来ます。
borderやpaddingを設定した際にボックス全体のサイズが変わってしまい、レイアウトが崩れたりするのを防ぎます。

記述方法

box-sizing: 値;

値には下記を指定します。
・ content-box ：ボックスサイズにborderとpaddingを含めません。初期値。
・ border-box ：ボックスサイズにborderとpaddingを含めます。
・ inherit：親要素の値を継承します。

content-box

borderとpaddingの分だけ、ボックスの幅と高さが指定した200pxよりも大きくなります。

See the Pen
vYNMzvb by trym-endo (@poci)
on CodePen.

border-box

borderとpaddingに関わらず、ボックスの幅、高さ共に指定した通り200pxになっています。

See the Pen
KKdYXEe by trym-endo (@poci)
on CodePen.

全体に適用するとどのようなメリットがあるのか

CSSで全要素にbox-sizing:border-box;を指定する事で、paddingやborderに関わらず要素全体の幅は指定したwidthの値となる為、計算の手間が省けます。

ユニバーサルセレクタ(*)で指定する場合

* {
  box-sizing: border-box;
}

bodyに指定して子要素に継承する場合

※box-sizingは子要素に引き継がれない為、inheritで継承する必要があります。

body{
  box-sizing: border-box;
}
body *{
  box-sizing: inherit;
}

まとめ

あらかじめページ内の全要素にbox-sizing:border-box;を指定しておくと、paddingやborderによってボックス要素のサイズが変化する事がない為、コーディングがしやすくなるメリットがあります。