最終更新日 2021年6月14日

box-sizingプロパティ

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

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

値に「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;

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。