CSS ・ 余白・サイズ
box-sizing
サイズの計算方法
width・height に padding と border を含めるかどうかを指定します。border-box にするとサイズの計算がわかりやすくなります。
01
サンプルコード
HTML
1<div class="box content">content-box（200px＋余白＋枠線）</div>
2<div class="box border">border-box（ちょうど200px）</div>
CSS
1.box {
2 width: 200px;
3 padding: 16px;
4 border: 4px solid #b68235;
5 margin-bottom: 8px;
6 background: #f6ead8;
7}
8.content {
9 box-sizing: content-box;
10}
11.border {
12 box-sizing: border-box;
13}
02
実行結果
ブラウザでの表示
03
解説
初期値の content-box では、width は内容部分だけの幅です。上の例では 200px ＋ padding 32px ＋ border 8px で、実際の幅は 240px になります。
border-box にすると、width に padding と border が含まれ、見た目の幅がちょうど 200px になります。
計算が直感的になるため、すべての要素に border-box を指定するのが現在の定番です。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
content-box | width は内容部分の幅（初期値） |
border-box | width に padding と border を含める |
すべての要素に border-box を指定する
CSSの最初に書いておく、リセットの定番です。
CSS
1*, *::before, *::after {
2 box-sizing: border-box;
3}
注意点
- 01margin は border-box でも width に含まれません。
- 02途中から box-sizing を変えると、既存のレイアウトの寸法がずれます。最初に決めておきます。