box-sizingプロパティ

値

次の値を設定することができます。

• content-box - ボックスの幅、高さにボーダー、余白を含まない。初期値。
• border-box - ボックスの幅、高さにボーダー、余白を含む。

パターン1

「content-box」を指定した場合の例です。

CSS コード例

.box1 {
  padding: 20px;
  width: 200px;
  height: 50px;
  box-sizing: content-box;
  border: 5px solid #ccc;
}

HTML コード例

<p class="box1">box-sizingプロパティのテスト</p>

パターン2

「border-box」を指定した場合の例です。

CSS コード例

.box3 {
  padding: 20px;
  width: 200px;
  height: 50px;
  box-sizing: border-box;
  border: 5px solid #ccc;
}

HTML コード例

<p class="box3">box-sizingプロパティのテスト</p>