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

box-sizing property

box-sizing は CSS のプロパティで、要素の全体の幅と高さをどのように計算するのかを設定します。

ボックスモデル

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
box-sizing
10
12
29
5.1
18
6
border-box
1
12
1
3
18
2
content-box
1
12
1
3
18
2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
実装メモ
  • 高さが `window.getComputedStyle()` から計算される場合、`box-sizing` は考慮されません。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • ベンダープレフィックス付きで対応: -moz- (1)
実装メモ
  • Firefox 23 より前では、高さが `window.getComputedStyle()` から計算される場合、`box-sizing` は考慮されません。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 2件
実装メモ
  • 高さが `window.getComputedStyle()` から計算される場合、`box-sizing` は考慮されません。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)

基本構文

CSS 
/* Global reset (recommended) */
*, *::before, *::after {
  box-sizing: border-box;
}

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

ライブデモ

content-box

box-sizing property Content-box demo.

プレビュー全画面表示

border-box

box-sizing property Border-box demo.

プレビュー全画面表示

Inputfieldcomparison

box-sizing property Inputfieldcomparison demo.

プレビュー全画面表示

実務での使いどころ

  • グローバル CSS リセット

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

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

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

注意点

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

アクセシビリティ

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

参考リンク