ボックスモデルのブラウザ挙動/実装演習

この単元で学ぶこと

• 指定幅と実際の枠幅の差から原因を特定できる
• box-sizing変更後の内容幅を計算できる
• 余白指定とレイアウト方式に応じた挙動を判断できる

本文解説

不具合のコード 親の内容幅は320px。子には「width:100%; padding:16px; border:2px solid; box-sizing:content-box; margin:0」を指定しました。width100％は親の内容幅320pxですが、子の枠外端は320＋16×2＋2×2＝356px。右へ36pxはみ出す原因は、paddingとborderが指定幅の外側に加わることです。

border-boxで修正 子をbox-sizing:border-boxに変えると枠外端は320px、内容幅は320－32－4＝284pxです。カードの外枠を親へ合わせつつ内側余白を保てます。背景を広げるためにwidthを増やす修正は、この不具合を悪化させます。

marginを追加した場合 修正後の子へ左右margin各10pxを追加すると、margin込みでは340pxになります。border-boxはpaddingとborderを含みますがmarginを含まないからです。「width:calc(100% - 20px)」なら枠外端300px、左右marginを合わせ320pxになります。余白の取り方は親側paddingなど他の設計もあります。

左右が異なる例 「width:200px; padding:4px 12px 8px 20px; border:1px solid; box-sizing:content-box」では、横方向に足すpaddingは右12＋左20＝32pxです。上下4＋8は幅には足しません。枠外端234px、paddingを含みborderを含まない範囲は232pxです。

上下の間隔を解く 通常フローの隣接ブロックで相殺条件を満たし、先の下margin24px、後の上margin16pxなら間隔24pxです。同じ要素を縦のFlexアイテムにした場合、アイテム間marginは相殺されないので、gap等がなければ24＋16＝40pxです。CSSの数字だけでなく親のdisplayも読みます。

背景が塗られない余白 「background:lightblue; padding:12px; margin:12px」の通常設定では、paddingには背景が見え、marginにはその要素自身の背景が塗られません。marginの色を変えるプロパティを探すのではなく、背景を付けたい範囲が要素の内側か外側かを見直します。背景クリップを変更していない前提です。

ラベルの大きさ spanをdisplay:inlineのままwidth:120pxと指定しても、非置換インラインの幅を固定する効果はありません。display:inline-blockへ変更すれば、内容幅やbox-sizingを使って寸法を指定できます。文字サイズの変更だけで幅指定の適用条件が変わるわけではありません。

実装演習の答え 枠外端240px、左右padding各18px、左右border各3px、margin0のカードが必要なら「width:240px; padding:18px; border:3px solid; box-sizing:border-box」とできます。内容幅は198pxです。開発者ツールで内容198、padding36、border6の合計240を確認すると、目視だけより原因を切り分けやすくなります。

図解

重要ポイント

• 親320pxにcontent-box100％＋余白36pxは356px。
• border-boxへ変えると枠320px、内容284px。
• 左右margin20pxを追加するなら指定幅も調整。
• Flexアイテム間は通常ブロックの上下相殺と異なる。

間違えやすい点

• 上下paddingを横幅へ加算しない。
• padding-boxとborder-boxの範囲を混同しない。
• 親displayを見ず余白の相殺を判断しない。

用語解説

枠外端幅

左右のborderの外端の間の幅。marginは含まない。

padding-box

contentとpaddingを含み、borderとmarginを含まない領域。

calc()

長さなどの値を計算式で指定するCSS関数。

関連教材

• ボックスモデルを理解する
• カスケードと詳細度のブラウザ挙動/実装演習