ボックス

box-sizing

box-sizing は、width と height に padding と border を含めるかどうかを決めます。border-box にすると、決めた幅と高さのとおりの大きさになります。

構文

content-box | border-box

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  width: 200px;
  height: 120px;
  padding: 20px;
  border: 10px solid #88d1c7;
  box-sizing: border-box;
}

box-sizingborder-box

content-boxborder-box

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

content-box：width と height は中身の部分だけの大きさです。padding と border はその外に足されるので、箱は決めた大きさより大きくなります。初期値です。
border-box：width と height は border の外側までの大きさです。padding と border を増やすと、そのぶん中身の部分が狭くなります。

このページのプレビューは width: 200px、height: 120px、 padding 20px、border 10px です。content-box にすると、箱は 200 + 20 × 2 + 10 × 2 = 260px の幅になります。

大きさの計算がわかりやすくなるので、多くのサイトでは *, *::before, *::after { box-sizing: border-box; } と書いて、すべての要素を border-box にしています。