CSS Box Sizing

CSS Box Sizing

CSS box-sizing 属性が要素の合計幅と高さに内側パディング（充填）とボーダーを含めることを許可します。

CSS box-sizing 属性を指定しない場合

デフォルトでは、要素の幅と高さは以下のように計算されます：

  • width + padding + border = 元素の実際の幅
  • height + padding + border = 元素の実際の高さ

これは意味します：要素の幅/高さを設定する場合、要素は通常設定したよりも大きく見えます（なぜなら要素のボーダーや内側パディングが指定された幅/高さに追加されているからです）。

次の図は、同じ指定された幅と高さを持つ2つの <div> 要素を示しています：

この div は小さい
（幅300px、高さ100px）。
この div は大きい
（幅も300px、高さも100pxです）。

上の2つの <div> 要素は最終的な結果で異なるサイズを呈示します（なぜなら div2 は内側パディングを指定しているからです）：

インスタンス

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

実際に試してみてください

box-sizing 属性がこの問題を解決します。

CSS box-sizing 属性を使用すると

box-sizing 属性が設定されている場合、要素の合計幅と高さに内側パディングとボーダーを含めることができます。

要素に box-sizing: border-box;、その場合、幅と高さは内側パディングとボーダーを含みます：

今や2つの div は同じサイズです！
おめでとう！

この例は前の例と同じで、2つの <div> 要素はすべて box-sizing: border-box;：

インスタンス

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

実際に試してみてください

使用 box-sizing: border-box; の効果が非常に良いため、多くの開発者がページ上のすべての要素がこの方法で動作するように望んでいます。

以下のコードは、このより直感的な方法ですべての要素のサイズを調整するように確実にします。多くのブラウザは、多くのフォーム要素に対してこの効果を実現しています box-sizing: border-box;（ただし、すべてではありません - これが input と textarea が width: 100%; で見え方が異なる理由です）。

すべての要素に適用することは安全で賢明です：

インスタンス

* {
  box-sizing: border-box;
}

実際に試してみてください

CSS Box Sizing 属性

属性 説明
box-sizing 要素の幅と高さの計算方法を定義します：内余白（padding）とボーダーを含めるべきかどうかです。