ボックスモデルとは？余白とサイズの基礎(margin/padding)

ボックスモデルとは何か

ボックスモデルとは、HTMLの各要素が四角い箱として扱われ、その箱が内側から外側に向かって複数の層で構成される、という考え方です。レイアウトを理解する土台になります。

箱は内側から、内容、padding(内側の余白)、border(枠線)、margin(外側の余白)の順に重なっています。この層の関係をつかめると、余白の効き方が見えてきます。

marginとpaddingの違い

paddingは要素の内容と枠線の間にできる内側の余白です。背景色を付けると、paddingの部分まで背景が広がります。

一方marginは枠線の外側、つまり隣の要素との間にできる余白です。背景色は乗りません。内側を空けたいならpadding、要素同士を離したいならmargin、と覚えると混乱しにくくなります。

実務ではどこで関係する？

ボックスモデルは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

ボックスモデルについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

幅が崩れる原因

初期状態のCSSでは、指定した幅は内容部分の幅を指し、そこにpaddingやborderが加わります。つまり幅を100に指定してpaddingを足すと、実際の見た目の幅はそれより大きくなります。

これが「幅を指定したのにはみ出す」「横並びが崩れる」の典型的な原因です。計算が直感とずれるため、初心者がもっともつまずきやすいポイントです。

崩れを防ぐ手順

余白を含めても幅がずれないようにする基本的な対処は次のとおりです。

1. 要素にbox-sizingをborder-boxに指定する
2. これでpaddingとborderが指定幅の内側に収まるようになる
3. 幅と余白を別々に足し算せず、指定幅をそのまま全体幅として扱えるか確認する
4. 全体に一括適用したい場合は共通のスタイルとしてまとめて指定する
5. ブラウザで再確認し、はみ出しが解消したか見る

marginの重なりに注意

上下に並んだ要素のmarginは、足し合わさるのではなく大きいほうにまとめられる「マージンの相殺」という挙動があります。これを知らないと余白が思ったより狭く見えて戸惑います。

余白が足りない・多すぎると感じたら、相殺が起きていないか確認しましょう。paddingに置き換える、要素の間に区切りを入れるなどで挙動をそろえられます。

崩れの確認を素早く回す

余白の崩れは、コードだけ見ても気づきにくく、実際の表示で確かめるのが近道です。修正と確認を何度も繰り返すため、手軽に共有できる環境があると作業がはかどります。

ギガサイト便はHTMLやCSSを含むZIPをドロップするだけで共有URLを発行でき、同じURLのままファイルを差し替えられます。余白を直した最新版をすぐに表示・共有でき、相手にリンクを送り直す手間もかかりません。