“box-sizing”プロパティ:サイズの計算方法

概要

“box-sizing”プロパティは要素を描画するときの横幅と高さの計算方法を指定します。

“box-sizing”プロパティは“width”プロパティや“height”プロパティで指定するサイズがCSSのボックスモデルのどの領域のサイズになるのかを指定します。

サンプルコード

値

CSSのボックスモデル

ブラウザが要素を描画する時にはCSSの“ボックスモデル(box model)”に基づいて描画します。

既定では要素に“width”プロパティや“height”プロパティを適用してそのサイズを指定するとき、指定したサイズはコンテント・ボックスの大きさとして計算されます。

ただ、視覚的にはボーダー・ボックスまでが要素の大きさであり、要素をレイアウトするときにもボーダー・ボックスまでの大きさを考慮する必要があります。なので、既定では要素の大きさを考える際にはその都度パディングとボーダーの大きさを計算する必要があります。

“box-sizing: border-box;”を適用した場合には既定とは異なり、要素のサイズは最初からボーダーの幅を含んだサイズとして計算されるので、レイアウトのする時にパディングとボーダーの大きさを考慮する必要がありません。

仕様書

定義されている仕様書

box-sizing

content-box
border-box

box-sizing

content-box
border-box

コンテント・ボックスのサイズとして計算する

div {

box-sizing: content-box;
width: 100px;
height: 100px;
border: 20px solid #cca6bf;
padding: 20px;
margin: 20px;

}

box-sizing: content-box;

ボーダー・ボックスのサイズとして計算する

div {

box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #cca6bf;
padding: 20px;
margin: 20px;

}

box-sizing: border-box;