STEP 1
ボックスモデルの4つの箱
中身から外へ、4つの層が重なっています。特に padding(内側) と margin(外側) の違いが最重要です。
content(内容)
文字や画像そのもの。いちばん内側。
padding(内側の余白)
内容と枠のあいだのゆとり。背景色が及ぶ範囲。
border(枠線)
箱のふち。太さ・色・種類を指定できる。
margin(外側の余白)
箱とまわりの要素とのあいだの距離。
STEP 2
動かして体感する
スライダーを動かすと、真ん中の箱と連動するCSSが変わります。paddingは「内側が広がる」、marginは「まわりと離れる」ことを確かめましょう。
margin
border
padding
content
連動するCSS
STEP 3
余白クイズ
内側・外側の余白、使い分けられますか?全8問です。
PLUS
余白のコツ
1. 内はpadding・外はmargin
ボタンの押せる範囲を広げたい→padding。要素どうしを離したい→margin。
2. 余白は8の倍数で
8・16・24…と揃えるとリズムが出て整う(次のW4で詳しく)。
3. box-sizing: border-box
幅にpadding/borderを含める設定。サイズ計算が直感的になり定番。
4. marginの相殺に注意
上下に隣り合うmarginは大きい方に「まとまる」。想定とズレたら思い出す。
ボックスモデルの合言葉:
① すべての要素は4つの箱
② 内側=padding、外側=margin
③ 余白は8の倍数で揃える
—— 余白を制する者はレイアウトを制す。