CSS: box-sizing
例えば2 columnにする時に
50% にしても、はみ出るこれは、「
50% 」はborderを含めない中身のみに対して指定しているから。border分の誤差が生じるためにはみ出る
明示的に
width や height を指定した場合にのみ影響がある、はずinherit
親要素の値を継承する
content-box と border-box の違いこの違いはwidthやheightを指定している場合にのみ生じる
CSSのBox Modelを意識しているとわかりやすい
MDNの例を触ってみるとわかりやすい
content-box の場合
css// 青に対して
box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px; width: 100% としているので、黄色の枠内に収まってほしいが、 width:100% はcontent部分のみに当たっている図の赤四角がcontent部分
青と赤の間にはpadding分の隙間がある
2つの緑の線は同じ大きさ
左右の
border 20pxと、左右の padding 10pxが、過剰なので30pxはみ出ているこの違いはwidthやheightを指定している場合にのみ生じるので、
width: 100% を除去するなり、 width: auto (default値なので同義)を指定するなりするとピッタリになる border-box の場合
css// 青に対して
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;border-boxを指定しているため、content + padding + border全体に対して
width:100% が当たるこの違いはwidthやheightを指定している場合にのみ生じるため、
contentのサイズは可能な限り自分で指定しないようにする、とある
width/heightを自分で指定するのではなく、親と子から導出されるべき
Reset CSSでborder-boxにしておく
css* {
box-sizing: border-box;
}