More than 3 years have passed since last update.

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

Last updated at 2020-05-26Posted at 2020-05-26

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

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

##記述方法

box-sizing: 値;

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

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

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

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;
}

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


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

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