CSS - box-sizing

トップ > CSSリファレンス > box-sizing

概要

属性名 box-sizing
border-box | padding-box | content-box
初期値content-box
適用可能要素width か height を持つすべての要素
継承継承しない
メディアvisual
サポートC3 / e8 / Fx1(-moz) / Ch1(-webkit) / Ch10 / Op10.1 / Sa3.1(-webkit) / Sa5.1

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS38.01.0(-moz)
29
1.0(-webkit)
10
10.13.1(-webkit)
5.1

説明

height や width が対象とする領域を指定します。box-sizing: border-box を指定することで、ボーダーによってコンテンツが想定した幅を超えてしまうことを防ぐことができます。

説明
border-boxボーダーの外側までを高さ・横幅とします。
padding-boxパディングの外側(ボーダーの内側)までを高さ・横幅とします。CSS3 の草案で定義されていましたが、最終案には採用されていないようです。Firefox が -moz 付きでサポートしています。
content-boxコンテンツの外側(パディングの内側)までを高さ・横幅とします。
width:150px
width:150px
width:150px
border-box
padding-box
content-box

使用例

CSS
.sample-border-box {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    background: #ffcccc;
    border: 10px solid #993333;
    padding: 10px;
    width: 80px;
    height: 80px;
}
.sample-content-box {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    background: #ffcccc;
    border: 10px solid #993333;
    padding: 10px;
    width: 80px;
    height: 80px;
}
HTML
<h5>border-box</h5>
<div class="sample-border-box">こんにちわ</div>
<h5>content-box</h5>
<div class="sample-content-box">こんにちわ</div>
表示
border-box
こんにちわ
content-box
こんにちわ

関連項目

width, height, min-width, min-height, max-width, max-height

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月22日
http://www.tohoho-web.com/css/prop/box-sizing.htm