Widely available YES。すべてのブラウザで長期サポート済み。グローバルリセットとして必須。
レイアウト Widely available

box-sizing property

デフォルトの content-box では width: 100% に padding や border を加えると要素が親からはみ出す。border-box を使うと width に padding と border が含まれ、直感的なサイズ指定が可能になる。現代の CSS リセットではほぼすべての要素に border-box を適用するのが標準となっている。

ボックスモデル

概要

デフォルトの content-box では width: 100% に padding や border を加えると要素が親からはみ出す。border-box を使うと width に padding と border が含まれ、直感的なサイズ指定が可能になる。現代の CSS リセットではほぼすべての要素に border-box を適用するのが標準となっている。

対応ブラウザ

デスクトップ

Chrome 10+
Edge 12+
Safari 5.1+
Firefox 29+

モバイル

Chrome Android 18+
Safari iOS 6+
Firefox Android 29+

基本構文

CSS 
/* グローバルリセット（推奨） */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 個別指定 */
.input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 1rem;
  border: 2px solid #ccc;
}

実務での使いどころ

  • グローバル CSS リセット

    プロジェクト全体で border-box を適用し、padding や border を含めた直感的なサイズ計算を実現する。

  • フォーム要素のサイズ制御

    input や textarea に width: 100% を指定しても、padding や border で親からはみ出さなくなる。

注意点

  • サードパーティの CSS が content-box を前提としている場合、グローバルリセットとの競合に注意する。

アクセシビリティ

  • box-sizing はレイアウト計算のみに影響し、アクセシビリティに直接的な影響はない。ただし要素がはみ出してクリッピングされるとコンテンツが読めなくなる可能性がある。

参考リンク