CSS ・ CSSの記法
ボックスモデル
すべての要素は4層の箱でできている
HTMLのすべての要素は、幅と高さを持った四角い箱（ボックス）として表示されます。中心の内容（content）を、padding・border・margin の3つの層が囲んでいます。
01
サンプルコード
HTML
1<div class="area">
2 <div class="box">
3 <div class="content">内容（content）</div>
4 </div>
5</div>
CSS
1/* margin の範囲を見やすくするための色 */
2.area {
3 display: flow-root;
4 background: #fde9cf;
5}
6.box {
7 width: 200px;
8 margin: 20px;
9 padding: 20px;
10 border: 8px solid #b68235;
11 background: #d9ecd5;
12}
13.content {
14 padding: 8px 0;
15 text-align: center;
16 background: #fff;
17}
02
実行結果
ブラウザでの表示黄色が margin、緑が padding、茶色の線が border、内側の白い部分が content です
03
解説
ボックスモデルは、要素を「箱」として考える、CSSでレイアウトを組むうえで最も大切な考え方です。どの要素も、内側から content（内容）→ padding（内側の余白）→ border（枠線）→ margin（外側の余白） の4層でできています。
width・height で指定するのは、初期値では一番内側の content の大きさです。そのため width: 200px に padding: 20px と border: 8px を付けると、見た目の幅は 200 ＋ 40 ＋ 16 ＝ 256px になります。
box-sizing: border-box を指定すると、width に padding と border が含まれ、見た目の幅がちょうど指定した値になります。すべての要素に指定しておくのが定番です。
ブラウザの開発者ツール（検証）で要素を選ぶと、4層それぞれの大きさが図で表示されます。思った通りの大きさにならないときは、まずここを確認します。
04
応用例・注意点
4つの層
| 層 | 説明 |
|---|---|
content | 文章や画像などの内容。width・height で大きさを指定 |
padding | 内容と枠線の間の余白。背景色が付く |
border | 枠線。太さの分だけ箱が大きくなる |
margin | 枠線の外側の余白。隣の要素との間隔。背景色は付かない |
border-box で幅をそろえる
padding や border を付けても、見た目の幅が width の値のままになります。
HTML
1<p class="box">アクトハウス</p>
CSS
1*, *::before, *::after {
2 box-sizing: border-box;
3}
4.box {
5 width: 400px;
6 padding: 50px;
7 /* 見た目の幅はちょうど 400px */
8}
注意点
- 01margin は箱の大きさ（width）には含まれません。border-box でも同じです。
- 02上下に並んだ要素の margin は重なり、大きいほうだけが適用されます（マージンの相殺）。
- 03インライン要素（span・a など）は、width・height や上下の margin が効きません。箱として扱いたいときは display: inline-block や block にします。