CSS3 box-sizing プロパティは、要素の全体の幅と高さにパディングとボーダーを含めることができるようにします。

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

数字の後に続く -webkit- または -moz- は、接頭辞付きで動作した最初のバージョンです。

プロパティ
box-sizing	10.0 4.0 -webkit-	8.0	29.0 2.0 -moz-	5.1 3.1 -webkit-	9.5

CSS3 box-sizing プロパティがない場合

デフォルトでは、要素の幅と高さは次のように計算されます：

幅 + パディング + ボーダー = 実際の要素の幅
高さ + パディング + ボーダー = 実際の要素の高さ

これは、次のことを意味します：要素の幅/高さを設定すると、多くの場合、（要素のボーダーとパディングが、指定した要素の幅/高さに追加されるため）要素は設定したよりも大きく表示されます。

次の図は、幅と高さが同じに指定された 2 つの <div> 要素を表しています：

この div は小さい（幅が 300px で、高さが 100px です）。

この div は大きい（幅も 300px で、高さも 100px です）。

2つの <div> 要素は、結果的に（div2 にはパディングが指定されているため）サイズが異なってしまいます：

例

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}

Try it Yourself ❯

そのため、パディングとボーダーを差し引く必要があったので、長い間、web 開発者は必要な幅よりも小さな値を指定してきました。

CSS3 を使用することで、box-sizing プロパティがこの問題を解決します。

CSS3 CSS3 box-sizing プロパティを使用する

CSS3 box-sizing プロパティは、要素の全体の幅と高さにパディングとボーダーを含めることを可能にします。

要素に box-sizing: border-box; を設定した場合、パディングとボーダーは幅と高さに含まれます：

ここに、両方の <div> 要素に box-sizing: border-box; を追加した、上と同じ例があります:

例

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

Try it Yourself ❯

box-sizing: border-box; を使用した結果が素晴らしいので、多くの開発者が、ページ上のすべての要素をこのように動作するようにしたいと望んでいます。

下のコードは、すべての要素のサイズが、この直観的な方法で設定されることを保証します。既に、多くのブラウザは多数のフォーム要素に box-sizing: border-box; を使用しています（しかし、全てではありません - input と textarea は width: 100%; での外観が異なるからです）。

例

* {
box-sizing: border-box;
}

Try it Yourself ❯

CSS3 ボックス・サイズ設定