【CSS】box-sizing で横幅がはみ出るのを防ぐ

CSSで、要素に padding（余白）、borderを指定した場合、その分が幅に反映される仕様です。

例えば、下記のような style を指定している、要素があるとします。

そうすると、上記要素「.box 」の横幅は、
width＋padding（左右の余白）分＋border（左右の線幅）分となり、
実際には、 100% ＋ 20px ＋ 6px となります。

こういったときは、「box-sizing :border-box」 を指定すれば、余白と線幅を無視する形で指定できますので、計算する必要がなく楽に設定ができます。

box-sizing を指定する

こうすることで、padding、border-widthを幅に含めないようにできます。
※margin には効きませんのでご注意ください。

高さ（height）も同様です。

現在の主流のブラウザは、ほぼ「box-sizing」に対応していますので、CSSの初期設定時に指定してしまったのでいいと思います。

全ての要素に対して box-sizing を指定する