仕様

box-sizingcontent-box | border-box
一括/個別個別指定プロパティ
初期値content-box
適用対象幅または高さを受け入れるすべての要素
継承なし
百分率なし
計算値指定値

box-sizing プロパティは、width プロパティの示す値が、コンテンツ領域の左端から右端の距離か、境界領域の左端から右端の距離かを設定する個別指定プロパティです。
非継承プロパティで、初期値は content-box なので、省略時は content-box が指定値となります。

height プロパティに対しても同等の効果を示します。というより別々に指定する事は出来ません。
width プロパティなどの割合(%)の対象には影響せず、包括要素のコンテンツ領域の幅が対象です。

キーワード

  1. cdvSample420 > div { border: solid 1em; padding: 1em; width: 6em; }
  1. <div class="cdvSample420">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。

例
  1. box-sizing: content-box;

キーワード content-box を指定しました。content-box は、width プロパティなどの示す値が、コンテンツ領域の左端から右端の距離である事を示します。content-box は box-sizing の初期値です。

例
  1. box-sizing: border-box;

キーワード border-box を指定しました。border-box は、width プロパティなどの示す値が、境界領域の左端から右端の距離である事を示します。

例

CSS全体のキーワード

  1. cdvSample430 > div { border: solid 0.5em; padding: 0.5em; width: 80%; box-sizing: border-box; }
  2. cdvSample430 > div > div { border: solid 0.5em; padding: 0.5em; width: 80%; }
  1. <div class="cdvSample430">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。

親
子
  1. box-sizing: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. box-sizing: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。box-sizing プロパティの初期値は content-box です。

親
子
  1. box-sizing: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。box-sizing プロパティは非継承プロパティなので初期値の content-box を設定します。

親
子