`box-sizing` 幅に余白と線を含める

重要度5 / 5

意味

width の中に、内側の余白と線の太さを含めたいときに使います。border-box にすると、width: 100% の要素へ padding を足しても、親からはみ出しにくくなります。

サイト全体へ付けるときは、次のように全要素へまとめて指定することが多いです。あとから一部だけ content-box に戻すと、幅の計算が分かりにくくなるので、戻す理由があるときだけにします。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="card">余白と線を足しても、幅は100%のままです。</div>

CSS

.card {
  box-sizing: border-box;
  width: 100%;
  padding: 1rem;
  border: 2px solid #d9d6e8;
  background: #efeef8;
}

プレビュー

出典: MDN Web Docs（`@mdn/browser-compat-data`）