---
title: "ボックスモデルとは？余白とサイズの基礎(margin/padding)"
description: "余白を増やしたつもりが幅が崩れた、という経験はよくあります。CSSのボックスモデルが示すcontent・padding・border・marginの関係を正しく理解すると、レイアウトのトラブルを根本から解消できます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-css-box-model"
markdown: "https://giga-site.com/articles/what-is-css-box-model/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# ボックスモデルとは？余白とサイズの基礎(margin/padding)

CSSで余白を付けたのに思った位置に収まらない、という経験は多くの人にあります。その背景にあるのがボックスモデルという考え方です。この記事では、marginとpaddingの違いから幅が崩れる原因まで、レイアウトの基礎をやさしく整理します。

> Source HTML: https://giga-site.com/articles/what-is-css-box-model
> Article index: https://giga-site.com/articles/index.md

## ボックスモデルとは何か

ボックスモデルとは、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のままファイルを差し替えられます。余白を直した最新版をすぐに表示・共有でき、相手にリンクを送り直す手間もかかりません。

## よくある質問

### marginとpaddingはどちらを使えばよいですか

要素の内側に余白を作りたいならpadding、隣の要素との間隔を空けたいならmarginが基本です。背景色を余白部分まで広げたい場合はpaddingが適しています。

### 幅を指定したのにはみ出すのはなぜですか

初期設定では指定幅に内容分しか含まれず、paddingやborderが外側に加算されるためです。box-sizingをborder-boxにすると、余白や枠線を含めた幅で扱えるので崩れにくくなります。

### box-sizingは全体に当てても大丈夫ですか

多くの制作現場では全要素にborder-boxを一括適用するのが一般的です。幅の計算が直感的になり、レイアウトの崩れが減るため、最初に設定しておくと扱いやすくなります。

### 上下の余白が思ったより狭いのはなぜですか

上下に隣り合う要素のmarginは大きいほうにまとめられる相殺という挙動があるためです。意図した余白にならないときは、paddingに変えるか間に区切りを入れると安定します。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [ボックスモデルとは？余白・枠・幅の関係をやさしく解説](https://giga-site.com/articles/box-model-term/index.md)
- [CSSセレクタとは？スタイルを当てる対象の指定方法](https://giga-site.com/articles/what-is-css-selector/index.md)
- [クリティカルCSSとは？ファーストビューを速く出す手法](https://giga-site.com/articles/what-is-critical-css/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ボックスモデルとは？余白とサイズの基礎(margin/padding)",
  "description": "余白を増やしたつもりが幅が崩れた、という経験はよくあります。CSSのボックスモデルが示すcontent・padding・border・marginの関係を正しく理解すると、レイアウトのトラブルを根本から解消できます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-css-box-model",
  "url": "https://giga-site.com/articles/what-is-css-box-model",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "marginとpaddingはどちらを使えばよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "要素の内側に余白を作りたいならpadding、隣の要素との間隔を空けたいならmarginが基本です。背景色を余白部分まで広げたい場合はpaddingが適しています。"
      }
    },
    {
      "@type": "Question",
      "name": "幅を指定したのにはみ出すのはなぜですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "初期設定では指定幅に内容分しか含まれず、paddingやborderが外側に加算されるためです。box-sizingをborder-boxにすると、余白や枠線を含めた幅で扱えるので崩れにくくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "box-sizingは全体に当てても大丈夫ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "多くの制作現場では全要素にborder-boxを一括適用するのが一般的です。幅の計算が直感的になり、レイアウトの崩れが減るため、最初に設定しておくと扱いやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "上下の余白が思ったより狭いのはなぜですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "上下に隣り合う要素のmarginは大きいほうにまとめられる相殺という挙動があるためです。意図した余白にならないときは、paddingに変えるか間に区切りを入れると安定します。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```