最終更新日
box-sizingは、ボックスサイズの算出方法を指定するプロパティです。
値に「content-box」を指定した場合、widthとheightで指定する幅と高さが、コンテンツボックスに対して適用されます。パディングとボーダーは、幅と高さに含まれません。
値に「padding-box」を指定した場合、widthとheightで指定する幅と高さが、パディングボックスに対して適用されます。ボーダーは、幅と高さに含まれません。
値に「border-box」を指定した場合、widthとheightで指定する幅と高さが、ボーダーボックスに対して適用されます。パディングとボーダーは、幅と高さに含まれます。
初期値 | 適用先 | 継承 |
---|---|---|
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;