<div> 要素のパディングとボーダーが、要素の合計幅と高さに含まれるように指定します：

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

定義と用法

box-sizing プロパティは、sizing プロパティ（幅と高さ）が何を含むかをブラウザに指示するために使用されます。

ボーダー・ボックスを含める必要がありますか？それとも、コンテンツ・ボックス（width と height プロパティのデフォルト値）だけですか？

デフォルト値：	content-box
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.boxSizing="border-box" Try it

ブラウザ・サポート

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

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

CSS 構文

プロパティの値

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

値	説明
content-box	デフォルト値。 width および height プロパティ（並びに min/max プロパティ) は、コンテンツだけを含みます。ボーダー、パディング、マージンは含まれません
border-box	width および height プロパティ（並びに min/max プロパティ) は、コンテンツ、パディングおよびボーダーを含みますが、マージンは含みません
initial	プロパティにデフォルト値を設定します。initial を参照
inherit	このプロパティは親要素を継承します。inherit を参照

並んで接する 2 つのボーダーボックスを指定します：

div {
    box-sizing: border-box;
    width: 50%;
    float: left;
}

CSS3 box-sizing プロパティ

定義と用法