CSS box-sizingの使い方使用する理由について

2024年1月6日2024年7月30日

今回はbox-sizingプロパティについて解説いたします。

box-sizingを使用することによってコーディングでレイアウトを組む際に、管理が非常に楽になります。

このプロパティを知らないよ、といった方はぜひ覚えていってください！

box-sizingプロパティとは？

box-sizingプロパティは簡単に言いますと、要素の幅の中に、padding（内側の余白）とborder（枠線）の幅を含めるかどうか、という指定になります。

指定する値は2種類あります。

content-box（要素の幅に含めない）
border-box（要素の幅に含める）

それぞれの値について詳しく解説いたします。

指定する値について

content-box（要素の幅に含めない）※初期値

  <div class="card">
    <dl>
      <dt>記事のタイトル</dt>
      <dd>テキスト</dd>
    </dl>
  </div>

  <style>
    .card {
      width: 300px;
      padding: 20px;
      border: 2px solid #666666;
      background-color: #ffffff;
      box-sizing: content-box;     <!-- 要素の幅に含めない -->
      text-align: center;
    }
    .card dl dt {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1em;
    }
  </style>

widthプロパティで300pxの幅を作成しておりますが、検証ツールで確認したところ、要素の幅は344pxとなっております。

box-sizing: content-boxでは、paddingとborderの幅を含めないため、300px + padding（20px × 2）+ border（2px ×2） = 344pxとなっております。

例えば、300pxの要素を3列に並べたいといった場合は、paddingやborderの幅を考慮しないと、きれいにレイアウトを組むことができなくなってしまいます。

widthを300pxではなく、256pxにすればちょうど300pxにすることはできますが、つど考えなければいけないのは大変ですね。

border-box（要素の幅に含める）

  <div class="card">
    <dl>
      <dt>記事のタイトル</dt>
      <dd>テキスト</dd>
    </dl>
  </div>

  <style>
    .card {
      width: 300px;
      padding: 20px;
      border: 2px solid #666666;
      background-color: #ffffff;
      box-sizing: border-box;     <!-- 要素の幅に含める -->
      text-align: center;
    }
    .card dl dt {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1em;
    }
  </style>