【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 を指定する

コメント

タイトルとURLをコピーしました