ボックスモデルを理解する
width: 200pxと書いたのに、カードが200pxより広くなるのはなぜでしょうか。CSSでは内容、内側余白、枠線、外側余白を別々に扱います。それぞれの範囲を区別し、幅の計算とbox-sizingの違いをコードで確かめます。
この単元で学ぶこと
- content・padding・border・marginの位置を説明できる
- content-boxとborder-boxの幅を計算できる
- 余白の相殺が起こる条件を限定して説明できる
本文解説
内側から四つの領域 contentは文字や画像など内容を配置する領域です。その外にpadding（内側余白）、border（枠線）、margin（外側余白）が並びます。例えばボタンの文字と枠の間を広げるならpadding、隣のボタンとの間隔ならmarginが候補です。marginは要素の背景で塗られる領域ではありません。
content-boxで幅を計算 通常のブロックでbox-sizing: content-boxならwidthは内容幅を指定します。例として「.card { width:200px; padding:10px; border:2px solid; margin:15px; box-sizing:content-box; }」。左右の枠の外端までの幅は200＋10×2＋2×2＝224px、左右marginも含む幅は254pxです。ここではmin/max-widthや変形、スクロールバーなどの追加条件はありません。
border-boxで幅を計算 同じ指定でbox-sizing:border-boxにすると、width:200pxはpaddingとborderを含む幅です。内容幅は200－20－4＝176px、左右marginを含む幅は230pxです。marginはborder-boxにも含まれません。指定幅よりpaddingとborderだけの合計が大きい場合は内容幅が負になるわけではないため、単純な引算の適用条件にも注意します。
一括指定の読み方 padding: 4px 8px 12px 16pxは上4、右8、下12、左16の時計回りです。値が二つなら上下・左右、三つなら上・左右・下です。「margin: 10px 20px」は左右20pxずつを意味し、左右合計20pxではありません。幅を計算するときは左右の値だけを足します。
余白の相殺を限定する 通常フローのブロック同士の隣接する上下marginは、条件を満たすと相殺されます。正の下margin20pxと上margin30pxなら間隔は50pxではなく大きい方の30pxです。左右marginはこの相殺をしません。FlexやGridのアイテム間marginにも通常のブロックの上下相殺をそのまま適用しません。
背景と余白 通常のbackground-clipの初期値border-boxでは、背景はborder領域まで描画され、borderが透明なら背景が見えます。paddingには背景が描かれますがmarginは透明です。background-clip:content-boxとすれば内容領域へ限定できます。余白の色が付くかはpaddingとmarginの区別に加え、背景クリップの指定にも依存します。
インラインとの違い 通常の非置換インライン要素、例えばdisplay:inlineのspanではwidthやheightを指定してもブロックと同じように寸法を固定できません。寸法を持つラベルにしたいならinline-blockなどを検討します。全てのHTML要素が常に同じ幅計算で配置されるのではなく、displayとレイアウト方式も確認します。
練習と調べ方 幅300pxの親の中でカードを収めたいとします。「width:100%; padding:20px; border:2px solid; box-sizing:content-box」だと枠外端344pxです。border-boxへ変えれば枠外端300px、内容256pxになります。ただし左右margin10pxずつも付ければ合計320pxとなり、margin分までは収まりません。開発者ツールのボックス表示で各領域の計算値を確かめます。
図解
重要ポイント
- 内側からcontent→padding→border→margin。
- content-boxのwidthにpaddingとborderは含まれない。
- border-boxでもmarginは幅の外側。
- 上下marginの相殺を全レイアウトへ一般化しない。
間違えやすい点
- 左右の余白を一回分しか足さない。
- border-boxがmarginを含むと思い込まない。
- 非置換inlineへブロックと同じwidthの効果を期待しない。
用語解説
- padding
- 内容と枠線の間にある内側余白。
- margin
- 枠線の外側にある余白。
- box-sizing
- widthやheightがどの領域の寸法を指定するかを決めるプロパティ。
- マージンの相殺
- 条件を満たす上下marginが単純加算されず一つの余白となる現象。
関連教材
参考資料
教材データに登録された参考リンクです。リンク先の内容や更新日は提供元でご確認ください。
確認問題の出題・採点や学習履歴の保存にはログインが必要です。