CSS3 Pre-Reference



box-sizing

ボックスサイズの計算方法を指定

試す



コード

#containe {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

サンプル

※サポートしていないブラウザでは動作しません。サポートされていない単位(vw、vhなど)でも動作しません。

この要素の幅は90%、パディングは20px、ボーダーは6pxに指定されています。

コメントする


対応ブラウザ

Firefox
1.0~
Chrome/Safari
3.0~
Opera
InternetExplorer
8~

パラメータ

content-box | border-box | inherit
初期値 content-box
適用 幅、高さを持つ要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS3 Basic User Interface Module#7.1. 'box-sizing' property

解説

ボックスのサイズの計算方法を指定します。

主にIEが下手くそな設計をしたための対策として、IE以外のブラウザが導入したものですが、普通に公式仕様として導入されてしまったようです。

利用可能なキーワードは、inherit以外では以下の通り。

content-box
CSS2.1の規定通りに作用します。幅・高さの解釈にパディングやボーダーは含まれません。
border-box
幅や高さの指定はパディング、ボーダーを含む値として計算されます。

トラックバック

投稿されたコメント