box要素の大きさは、heightとwidthプロパティで決まります。しかし、決めた高さと幅が予想と違う結果となることがあります。
原因は、既定ではcontent boxの高さと幅を決めることになっているからです。
ボックス構造
HTMLの要素の外観は、ボックススタイルというHTMLの要素ブロックをcontentから順にブロックの箱で囲んでいくという構造で作られています。
margin
border
padding
content ↑
height
← width ↓ →
コンテンツ領域
コンテンツ領域はコンテンツの縁までのエリアです。通常はコンテンツ要素が収まるだけの高さ、幅しか持ちません。また、contentの外側にあるpadding領域の幅は0です。
初期状態では、box-sizingプロパティの値は、content-boxとなっています。
☆ブロック要素の大きさを調整するheight［min-height,max-height］やwidth［min-width,max-width］プロパティは、コンテンツ領域の高さや幅を設定します。もし、枠線を設定したりpaddingを設定して背景色の部分を拡大したりすると、要素全体の大きさは、heightやwidthで決めた大きさより大きくなります。
ボーダー領域
padding領域と margin領域との間にある領域です。初期状態では、幅は０です。borderプロパティで幅を設定することができます。
box-sizingプロパティの値をborder-boxにすると、height［min-height,max-height］やwidth［min-width,max-width］プロパティでの設定は、border領域までを含めた範囲に変更されます。
box-sizing
box-sizingは、ボックス要素の高さと幅をどの要素まで含めるかを決めるCSSプロパティです。
構文
値
content-box
初期値です。height、widthプロパティで各々大きさを与えた場合に、content-boxの高さ、幅として反映、表示します。
ボックスエリア全体の大きさは、height、widthで設定したコンテンツ領域の大きさにパディング領域の幅とボーダー領域の幅を加えたものになります。つまり、表示される要素の高さは、
高さ=(border-top)+(padding-top)+height+(padding-bottom)+(border-bottom)
幅は、
幅＝(border-left)+(padding-left)+width+(padding-right)+(border-right)
となります。
<div class="box-sizing">box要素</div>
.box-sizing {
box-sizing: content-box;
height: 2rem;
width: 8rem;
padding: 8px;
border: 1px solid #e80;
}
border-box
height、widthプロパティで各々大きさを与えた場合に、contentにpadding、borderも含めて高さ、幅として反映、表示します。
margin
border
↑
padding
height
content
← width →
↓
.box-sizing {
box-sizing: border-box;
height: 2rem;
width: 8rem;
padding: 8px;
border: 1px solid #e80;
}
表示される高さ＝height、幅＝widthとなります。