---
title: "ボックスモデルとは？余白・枠・幅の関係をやさしく解説"
description: "余白を設定したのに幅がずれる、枠を付けたらレイアウトが崩れた、という悩みを持つ方へ。ボックスモデルの四層構造を正しく把握することで、CSSのサイズ計算に自信を持って向き合えるようになります。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/box-model-term"
markdown: "https://giga-site.com/articles/box-model-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# ボックスモデルとは？余白・枠・幅の関係をやさしく解説

CSSで要素の大きさや間隔を整えるとき、土台になるのがボックスモデルです。すべての要素は内容・内側の余白・枠線・外側の余白という入れ子の四層で構成されます。この構造を理解すると、幅がずれる、余白が思い通りにならないといった悩みを解消できます。

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

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

ボックスモデルとは、HTMLの各要素を長方形の箱として扱い、その箱が複数の層からできているという考え方です。CSSでサイズや余白を指定するとき、この層構造を理解しているかどうかでレイアウトの精度が大きく変わります。

箱は内側から順に、内容を表す領域、内容の周りの内側余白、それを囲む枠線、そして箱の外側の余白という四つの層でできています。それぞれが要素の見た目と占有スペースに影響します。

ブラウザの開発者ツールでは、この四層が色分けで図示されます。実際の要素を選んで観察すると、数値と見た目の対応が直感的につかめます。

## 四つの層の役割

コンテンツ領域は文字や画像など実際の中身が入る部分で、幅や高さの指定が基準になります。パディングはその内側の余白で、中身と枠線の間にゆとりを作ります。

ボーダーはコンテンツとパディングを囲む枠線です。太さや色、線種を指定でき、見た目の境界を作ります。マージンは箱の外側の余白で、隣り合う要素との間隔を決めます。

内側に余白を足したいときはパディング、要素どうしを離したいときはマージン、という使い分けが基本です。混同すると間隔の調整がうまくいかなくなります。

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

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

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

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

## 幅のずれを防ぐ手順

初期設定では、指定した幅はコンテンツ領域だけを指し、パディングと枠線はその外側に足されます。そのため幅を決めたのに見た目が広がってしまうことがあります。次の手順で意図通りに整えられます。

1. まず幅がコンテンツ部分だけの指定になっていることを意識する
2. パディングや枠線を足すと全体の見た目幅が増えることを確認する
3. 全体幅を固定したいならbox-sizingをborder-boxに設定する
4. border-boxにすると指定幅の中にパディングと枠線が収まる
5. ページ全体に適用したい場合は共通の初期設定としてまとめて指定する

## マージンの相殺に注意

上下に並んだ要素の縦方向のマージンは、合算されず大きい方だけが採用されることがあります。これはマージンの相殺と呼ばれる挙動で、間隔が想定より狭くなる原因になります。

相殺は隣接する要素の上下マージンや、親子の境界などで起こります。間隔が思った数値にならないときは、この挙動を疑うと原因にたどり着きやすくなります。

回避したい場合は、片方をパディングに置き換える、あいだに枠線や別の要素を挟むといった方法があります。まずは相殺が起きていることに気づくのが第一歩です。

## ボックスモデルとレイアウトの関係

ボックスモデルは個々の要素の大きさを決めるだけでなく、要素どうしの並びや間隔の土台にもなります。フレックスボックスやグリッドといったレイアウト手法も、最終的には箱の大きさと余白の上に成り立ちます。

つまりレイアウト崩れの多くは、幅の計算方法やマージンの挙動の誤解に根があります。土台であるボックスモデルを押さえておくと、応用的なレイアウトも理解しやすくなります。

## レイアウト確認を素早く共有する

余白や幅の調整は、実際の画面で見て初めて気づくことが多い作業です。手元で確認したレイアウトをチームやクライアントにも見てもらいたいとき、ギガサイト便ならHTMLやZIPをドロップするだけで共有URLが発行され、その場で表示を確認してもらえます。

同じURLのままファイルを差し替えられるため、余白を微調整するたびにリンクを送り直す必要がありません。レビューのやり取りを軽くしたいときに役立ちます。

## よくある質問

### paddingとmarginの違いは何ですか？

パディングは枠線の内側にできる余白で、中身と枠の間にゆとりを作ります。マージンは枠線の外側の余白で、隣の要素との間隔を決めます。内側を広げたいか、要素どうしを離したいかで使い分けます。

### 幅を指定したのに要素が大きく見えるのはなぜですか？

初期設定では指定幅がコンテンツ領域だけを指し、パディングと枠線がその外側に加算されるためです。box-sizingをborder-boxにすると、指定幅の中にパディングと枠線が収まり、見た目の幅が安定します。

### マージンの相殺とは何ですか？

上下に隣り合う要素の縦マージンが合算されず、大きい方だけが採用される挙動です。間隔が想定より狭くなる原因になります。パディングに置き換えるか、あいだに要素を挟むことで回避できます。

### box-sizingはいつ使えばよいですか？

幅や高さを固定したいのにパディングや枠線で見た目がずれて困るときに有効です。border-boxを指定すると計算が直感的になり、ページ全体の初期設定としてまとめて適用するのが一般的です。

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

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

## 関連記事

- [ボックスモデルとは？余白とサイズの基礎(margin/padding)](https://giga-site.com/articles/what-is-css-box-model/index.md)
- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)
- [CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説](https://giga-site.com/articles/grid-layout-term/index.md)
- [メディアクエリとは？画面幅でデザインを切り替えるCSSの基礎](https://giga-site.com/articles/media-query-term/index.md)
- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [詳細度（specificity）とは？CSSが効かない時に確認する優先順位](https://giga-site.com/articles/css-specificity-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ボックスモデルとは？余白・枠・幅の関係をやさしく解説",
  "description": "余白を設定したのに幅がずれる、枠を付けたらレイアウトが崩れた、という悩みを持つ方へ。ボックスモデルの四層構造を正しく把握することで、CSSのサイズ計算に自信を持って向き合えるようになります。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/box-model-term",
  "url": "https://giga-site.com/articles/box-model-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "paddingとmarginの違いは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "パディングは枠線の内側にできる余白で、中身と枠の間にゆとりを作ります。マージンは枠線の外側の余白で、隣の要素との間隔を決めます。内側を広げたいか、要素どうしを離したいかで使い分けます。"
      }
    },
    {
      "@type": "Question",
      "name": "幅を指定したのに要素が大きく見えるのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "初期設定では指定幅がコンテンツ領域だけを指し、パディングと枠線がその外側に加算されるためです。box-sizingをborder-boxにすると、指定幅の中にパディングと枠線が収まり、見た目の幅が安定します。"
      }
    },
    {
      "@type": "Question",
      "name": "マージンの相殺とは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "上下に隣り合う要素の縦マージンが合算されず、大きい方だけが採用される挙動です。間隔が想定より狭くなる原因になります。パディングに置き換えるか、あいだに要素を挟むことで回避できます。"
      }
    },
    {
      "@type": "Question",
      "name": "box-sizingはいつ使えばよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "幅や高さを固定したいのにパディングや枠線で見た目がずれて困るときに有効です。border-boxを指定すると計算が直感的になり、ページ全体の初期設定としてまとめて適用するのが一般的です。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```