box-sizingとは？非エンジニア向けにわかりやすく解説

一言で言うと

幅・高さに padding/border を含めるか決める。

幅・高さに padding/border を含めるか決める。IT エンジニアリングの現場で頻繁に登場する概念のひとつで、関連する仕組みやベストプラクティスと合わせて理解しておくと応用が利きます。

box-sizing は CSS のプロパティです。ブラウザのデフォルトは content-box ですが、多くの現場では border-box を全体に適用するリセット CSS が標準的に使われています。

レイアウト設計 ── 要素の幅・高さが padding や border を含むかどうかを明示的に制御できます

リセット CSS ── *, *::before, *::after に border-box を適用するリセット CSS が現場での標準的な使い方です

崩れ防止 ── padding や border を追加しても要素サイズが変わらないため、レイアウト崩れを防ぎやすくなります