box-sizing

スペーシング・サイズ

要素のサイズ計算方法を指定するプロパティです。モダンCSS開発では必須です。

構文

Syntax

box-sizing: content-box | border-box

* {
  box-sizing: border-box;
}

実行結果

border-box (200px総幅)

content-box (244px総幅)

全要素でborder-boxを適用（推奨設定）

.container {
  width: 300px;
  padding: 20px;
  border: 2px solid #ccc;
  box-sizing: border-box;
}

実行結果

幅300pxにpadding・borderを含める

border-boxは直感的なサイズ計算。CSSリセットで全体に適用するのが一般的。

content-box（デフォルト）では、paddingとborderが幅に追加される。

IE8+, 全モダンブラウザ