最終更新日

box-sizingプロパティ

box-sizingは、ボックスサイズの算出方法を指定するプロパティです。

値に「content-box」を指定した場合、widthheightで指定する幅と高さが、コンテンツボックスに対して適用されます。パディングとボーダーは、幅と高さに含まれません。

値に「padding-box」を指定した場合、widthとheightで指定する幅と高さが、パディングボックスに対して適用されます。ボーダーは、幅と高さに含まれません。

値に「border-box」を指定した場合、widthとheightで指定する幅と高さが、ボーダーボックスに対して適用されます。パディングとボーダーは、幅と高さに含まれます。

CSS3での変更点
・box-sizingは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
content-box 幅と高さを持つすべての要素 なし
説明
content-box widthとheightをコンテンツボックスに対して指定します。パディングとボーダーは幅と高さに含まれません。(初期値
padding-box widthとheightをパディングボックスに対して指定します。ボーダーは幅と高さに含まれません。
border-box widthとheightをボーダーボックスに対して指定します。パディングとボーダーは幅と高さに含まれます。
inherit 親要素の値を継承します。
サンプルコード
box-sizing: content-box;
box-sizing: padding-box;
box-sizing: border-box;
box-sizing: inherit;
参考文献:CSS Basic User Interface Module Level 3外部リンク
HOME