Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

box-sizing

ボックスモデル(要素の大きさ)の算出方法を変更します。

サンプルコード
div.test { box-sizing: content-box;}
div.test1 { box-sizing: border-box;}
指定可能な値一覧
概要
content-boxwidth』プロパティ、『height』プロパティで指定された大きさにパディング、ボーダー、マージンの大きさを含みません。この『content-box』が初期値です。
border-boxwidth』プロパティ、『height』プロパティで指定された大きさにパディング、ボーダーの大きさが含まれます。マージンの大きさは含みません。
ブラウザでの表示結果

以下のサンプルのdiv要素には『width: 300px』、『height: 300px』、『padding: 10px』、『border: solid 10px red』と指定しています。

<div style="box-sizing: content-box; width: 300px; height: 300px; border: solid 10px red; padding: 10px; margin: 0 auto;">ここはdiv要素です。『box-sizing: <span style="color: #f00">content-box</span>』と指定しています。『width』プロパティ、『height』プロパティで指定された大きさにパディング、ボーダー、マージンの大きさを含みません。なのでこの要素の大きさは横幅340px、高さ340pxとなります。</div>

<div style="box-sizing: border-box; width: 300px; height: 300px; border: solid 10px red; padding: 10px; margin: 0 auto;">ここはdiv要素です。『box-sizing: <span style="color: #f00">border-box</span>』と指定しています。『width』プロパティ、『height』プロパティで指定された大きさにパディング、ボーダーの大きさが含まれ、マージンの大きさは含みません。なのでこの要素の大きさは横幅300px、高さ300pxとなります。</div>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

ボックスモデル(要素の大きさ)の算出方法を変更します。

値に『content-box』と指定した場合は、『width』プロパティ、『height』プロパティで指定された大きさにパディング、ボーダー、マージンの大きさを含みません。この『content-box』が初期値となります。

<div style="box-sizing: content-box; width: 300px; height: 300px; border: solid 10px red; padding: 10px; margin: 0 auto;">ここはdiv要素です。『box-sizing: <span style="color: #f00">content-box</span>』と指定しています。『width』プロパティ、『height』プロパティで指定された大きさにパディングの大きさ10pxとボーダーの大きさ10pxが加算されるため、この要素の大きさは横幅340px、高さ340pxとなります。</div>

値に『border-box』と指定した場合は、『width』プロパティ、『height』プロパティで指定された大きさにパディング、ボーダーの大きさが含まれます。マージンの大きさは含みません。

<div style="box-sizing: border-box; width: 300px; height: 300px; border: solid 10px red; padding: 10px; margin: 0 auto;">ここはdiv要素です。『box-sizing: <span style="color: #f00">border-box</span>』と指定しています。『width』プロパティ、『height』プロパティで指定された大きさにパディングの大きさ10pxとボーダーの大きさ10pxが含まれるため、この要素の大きさは『width』プロパティ、『height』プロパティで指定した通りの横幅300px、高さ300pxとなります。</div>

ベンダープレフィックスについては、現状ほぼ全ての最新ブラウザでベンダープレフィックスなしで実行できるため、必要ないと考えて頂いて問題ないかと思います。ただし、一部の古いAndroidの標準ブラウザではベンダープレフィックスが必要な場合がありますのでその場合は以下のような形で記述すると良いでしょう。

div.test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。