CSSで、要素に padding(余白)、borderを指定した場合、その分が幅に反映される仕様です。
例えば、下記のような style を指定している、要素があるとします。
1 2 3 4 5 6 7 8 9 |
.box{ width: 100%; padding: 10px; border:solid 3px #000; } |
そうすると、上記要素「.box 」の横幅は、
width+padding(左右の余白)分+border(左右の線幅)分となり、
実際には、 100% + 20px + 6px となります。
こういったときは、「box-sizing :border-box」 を指定すれば、余白と線幅を無視する形で指定できますので、計算する必要がなく楽に設定ができます。
目次
box-sizing を指定する
1 2 3 4 5 6 7 8 9 10 |
.box{ box-sizing: border-box; width: 100%; padding: 10px; border:solid 3px #000; } |
こうすることで、padding、border-widthを幅に含めないようにできます。
※margin には効きませんのでご注意ください。
高さ(height)も同様です。
現在の主流のブラウザは、ほぼ「box-sizing」に対応していますので、CSSの初期設定時に指定してしまったのでいいと思います。
全ての要素に対して box-sizing を指定する
1 2 3 4 5 6 7 |
*{ box-sizing: border-box; } |