ボックスモデルの「padding」と「margin」の違いは何ですか？

「padding」は要素の内容（テキストや画像など）とボーダーの間の余白であり、「margin」は要素自体の外側、他の要素との間隔を指します。どちらもボックスモデルで重要ですが、役割が異なるため使い分けることが大切です。

「box-sizing: border-box」と「content-box」の使い分けはどうすればいいですか？

「box-sizing: border-box」を使うと、widthやheightにpaddingやborderを含めたサイズ指定ができ、レイアウトが崩れにくくなります。一方、「content-box」はデフォルトの挙動で、widthやheightが内容部分のみを指します。複雑なレイアウトやレスポンシブデザインでは「border-box」がよく使われます。

ボックスモデルの理解がなぜCSSレイアウト設計で重要なのですか？

ボックスモデルを理解することで、要素間の余白やサイズ指定を正確にコントロールできるため、意図通りのレイアウトを作成できます。特に複数の要素が並ぶ場面では、marginやpaddingの使い分けやbox-sizingの指定がデザイン全体の品質や保守性に大きく影響します。

【初心者向け】CSSボックスモデル完全ガイド｜仕組み・構成・サイズ計算を徹底解説

ながみえ

HTML/CSSレッスン2-5『ボックスモデルを理解しよう』記事用アイキャッチ画像

一つ前の章では４種類のセレクタについて学習しました。

今回はボックスモデルについて見ていきましょう。

Lesson１：HTML入門編
Lesson２：CSS入門編
　・Lesson2-1：CSS学習の入り口｜文字に色を付けよう
　・Lesson2-2：CSSを読み込む３つの方法
　・Lesson2-3：テキストスタイルを変更しよう
　・Lesson2-4：４種類のセレクタを使いこなそう
　・Lesson2-5：ボックスモデルを理解しよう ◁今回はココ
　・Lesson2-6：ボックススタイルを変更しよう
　・Lesson2-7：継承とカスケードを理解しよう
　・Lesson2-☆1：セレクタの階層構造と優先順位を理解しよう
　・Lesson2-☆2：Webサイトの配色をマスターしよう
Lesson３：CSS応用編

CSSの「ボックスモデル」は、段落や見出し、画像などの要素をどのように配置し、サイズを決定するかを理解するための基本的な概念です。

すべてのHTML要素は見えない「ボックス」として扱われ、そのボックスには、コンテンツ（内容）、パディング（余白）、ボーダー（枠線）、マージン（外側の余白）という4つの領域が存在します。

このボックスモデルを正しく理解することで、ウェブページのレイアウトを思い通りに調整し、意図したデザインを正確に実現することができます。

<<前のページ

HTML/CSSレッスン2-4『4種類のセレクタを使いこなそう｜基本から実践まで』記事用アイキャッチ画像

HTML/CSSの記事一覧

HTML/CSS学習カテゴリの親ページ用アイキャッチ画像（Webサイト制作入門）、記事一覧へのリンク案内

次のページ>>

HTML/CSSレッスン2-6『ボックススタイルを変更しよう』記事用アイキャッチ画像

CSSボックスモデルの概要｜初心者が理解すべき基本概念

【CSS】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

CSSのボックスモデルは、ウェブページの各要素がどのように配置され、どの部分にスペースが確保されるかを決定するための重要な概念です。

ボックスモデルは以下の4つの領域で構成されています。

コンテンツボックス（content box）：実際のコンテンツ（テキストや画像など）が配置される領域
パディングボックス（padding box）：コンテンツとボーダーの間の余白
ボーダーボックス（border box）：パディングを囲む枠線
マージンボックス（margin box）：他の要素との間隔を確保するための余白

以下の図をご覧ください。各ボックスがどのように配置され、どの部分がどの役割を果たしているのかを視覚的に理解できます。

CSSのボックスモデルを示す図解。margin、border、padding、contentボックスの構造を解説。

この図のように、ボックスは内側から コンテンツ → パディング → ボーダー → マージン という順番で構成されています。

例えば要素の幅や高さを指定すると、デフォルトではコンテンツボックスのサイズが変わり、ボーダーやパディング、マージンはそれに応じて変化することになります。

CSSボックスモデルの構成要素｜4つのボックスを徹底解説

ボックスモデルは、コンテンツボックス、パディングボックス、ボーダーボックス、マージンボックスの4つの領域で構成されています。

それぞれの役割と設定方法を詳しく見ていきましょう。

コンテンツボックス（content box）｜内容領域の役割と特徴

コンテンツボックスは、テキストや画像などの実際のコンテンツが配置される領域です。

要素の幅（width）や高さ（height）を指定すると、デフォルトではこのコンテンツボックスのサイズを決定します。

すなわち、要素の高さを20pxに指定した場合、その要素の枠線（ボーダー）は20pxより大きくなるということです。

<div class="content-box-example">コンテンツボックス</div>

.content-box-example {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

コンテンツが収まりきらない場合、要素の内容ははみ出したり、自動的に折り返されたりします。
overflow プロパティを使用して、スクロールや隠す設定が可能です。

参考資料

補足：<div>タグとは？

<div> タグはHTMLにおいて「ブロック要素」として機能し、ウェブページ内のコンテンツをグループ化するために使用されます。特にCSSを適用してスタイルやレイアウトを設定する際に役立ちます。

例えば複数の要素をひとまとめにして、特定のデザインや配置を施す場合に使用します。

<div class="container">
    <p>これは段落です。</p>
    <p>これは別の段落です。</p>
</div>

このように<div> を活用することでページの構造を整理しやすくなり、スタイリングの適用も容易になります。

パディングボックス（padding box）｜内側余白の使い方と影響

パディングボックスは、コンテンツとボーダーの間の余白を指します。

padding プロパティを使用して、四方に余白を設定できます。

padding: 20px; /* 四方向に均等に余白を追加 */
padding: 10px 20px; /* 上下、左右に異なる値を設定 */
padding: 10px 15px 20px 25px; /* 上、右、下、左の順で指定 */

要素に背景色を指定すると、パディング内はその色になります。
要素のサイズはパディングによって拡張されるため、注意が必要です。

ボーダーボックス（border box）｜枠線エリアの役割と活用

ボーダーボックスはパディングの外側に配置される枠線です。

border プロパティを使用して、枠のスタイルや色を指定します。

border: 2px solid black;  /* 太さ、スタイル、色を指定 */
border-width: 5px;        /* ボーダーの太さのみを指定 */
border-style: dashed;     /* 点線ボーダー */
border-color: red;        /* ボーダーの色を指定 */

ボーダーを設定すると要素の合計サイズが増加します。
ボーダーのスタイルには、solid、dashed、dotted などがあります。

マージンボックス（margin box）｜外側余白の使い方と注意点

マージンボックスは要素の外側に位置し、他の要素との間隔を調整するための領域です。

margin プロパティを使って余白を設定できます。

margin: 20px; /* 四方向に均等なマージンを追加 */
margin: 0 auto; /* ブロック要素を中央揃え */
margin: 10px 15px 20px 25px; /* 上、右、下、左の順で指定 */

マージンは要素の背景色の影響を受けません。
上下のマージンが重なる「マージン相殺」という現象が発生する場合があります。

コードを書いてみよう

以下のHTMLコードを使用して、ボックスモデルの各部分（コンテンツ、パディング、ボーダー、マージン）を設定してみましょう。

コンテンツの幅を 200px、高さを 100px に設定する。
パディングを上下 20px、左右 30px に設定する。
ボーダーを 黒色、太さ5px、実線 で設定する。
マージンを四方向すべて 50px に設定する。
背景色を好きな色に変更する。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ボックスモデルの練習</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box">ボックスモデルを試そう！</div>
</body>
</html>

CSSボックスモデルの適用方法

ボックスモデルを適用する際、CSSのさまざまなプロパティを適切に設定することで、要素のサイズやレイアウトを細かく制御できます。

ここではデフォルトの挙動、box-sizing プロパティ、ボックスサイズの計算方法について解説します。

初期状態のボックスモデル挙動｜widthとheightの範囲を理解

デフォルトではwidth や height を指定した場合、これらの値はコンテンツボックスのサイズに適用されます。

そのためパディングやボーダーを追加すると、実際の要素のサイズは指定値より大きくなることに注意が必要です。

例えば「default-box」と命名したクラスセレクタを適用した以下のコードを見てみましょう。

<div class="default-box">デフォルトのボックス</div>

.default-box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  background-color: lightgray;
}

この要素のサイズを計算すると以下のようになります。

200px (ｺﾝﾃﾝﾂ) + 20px * 2 (ﾊﾟﾃﾞｨﾝｸﾞ) + 5px * 2 (ﾎﾞｰﾀﾞｰ) = 250px

デフォルトでは、指定したサイズにパディングやボーダーが追加されます。

`box-sizing` プロパティの使い方

CSSではbox-sizing プロパティを使用することで、ボックスモデルのサイズ計算の方法を変更できます。

特にborder-box を適用することでボーダー（枠線）のサイズを指定することができ、より直感的にレイアウトを調整できます。

例えば「border-box-example」と命名したクラスセレクタを適用した以下のコードを見てみましょう。 CSSコードの下から3行目に注目して下さい。

<div class="border-box-example">ボーダーボックス</div>

.border-box-example {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
  background-color: lightblue;
}

200px (全体サイズ) = 200px (コンテンツ + パディング + ボーダー)

box-sizing: border-box; を使用すると、width と height がパディングやボーダーが含まれた状態で計算されます。
これにより、意図したレイアウトを正確に保ちやすくなります。

まとめ

CSSのボックスモデルでは、デフォルトではコンテンツボックスが基準となる。
box-sizing: border-box; を適用すると、パディングやボーダーを含むサイズ指定が可能になる。
レイアウト崩れを防ぐために、border-box を積極的に活用するのがおすすめ。

コードを書いてみよう

以下のHTMLとCSSを使用して、異なるボックスモデル設定を持つ要素がどのように表示されるかを試してみましょう。

ボックス1とボックス2の表示幅の違いを確認し、どの設定がレイアウトに適しているか考えてみましょう。
パディングやボーダーを変更して、どのようにサイズに影響が出るか試してみましょう。

<div class="box box1">ボックス1</div>
<div class="box box2">ボックス2</div>

.box {
    width: 150px;
    height: 100px;
    padding: 20px;
    border: 5px solid #333;
    margin-bottom: 20px;
    text-align: center;
}

.box1 {
    box-sizing: content-box;
    background-color: lightyellow;
}

.box2 {
    box-sizing: border-box;
    background-color: lightpink;
}

CSSマージンの相殺（margin collapse）

CSSのボックスモデルにおいてマージン（margin）は要素同士の間隔を設定するための重要なプロパティですが、特定の条件下でマージンが相殺される（重なり合う）「マージン相殺（margin collapse）」という現象が発生します。

この動作を理解し、意図しないレイアウトの崩れを防ぎましょう。

マージン相殺とは？｜重なり合う余白の仕組みを理解

通常、隣接する2つの要素が上下に配置され、それぞれに margin が設定されている場合、大きい方のマージンのみが適用され、合算されないという挙動が起こります。

これを「マージン相殺」と呼びます。

以下のコードで考えてみましょう。

<div class="box-a">A</div>
<div class="box-b">B</div>

.box-a {
  margin-bottom: 20px;
  background-color: lightblue;
  padding: 10px;
}

.box-b {
  margin-top: 30px;
  background-color: lightcoral;
  padding: 10px;
}

通常であれば合計 50px の間隔ができると思われますが、実際には 30px しか確保されません。

これは、2つのマージンのうち大きい方が優先されるためです。

コードを書いてみよう

次のHTMLとCSSを使用して、上下のマージンがどのように相殺されるのかを観察してみましょう。

2つの要素の間の距離をブラウザで確認してください。
なぜ合計80pxではなく、実際には50pxしか間隔が空かないのか考えてみましょう。
マージン相殺を防ぐために、親要素に padding を加えるとどうなるか試してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>マージン相殺の練習</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box margin-top">ボックス1</div>
    <div class="box margin-bottom">ボックス2</div>
</body>
</html>

.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    text-align: center;
    padding: 20px;
    border: 2px solid black;
}

.margin-top {
    margin-bottom: 50px;
}

.margin-bottom {
    margin-top: 30px;
}

CSSボックスモデルまとめ｜重要ポイントを総整理

この記事ではCSSのボックスモデルについて学習し、各構成要素（コンテンツ、パディング、ボーダー、マージン）の役割や、それらが要素のサイズにどのように影響を与えるかを理解しました。

学習したポイント

ボックスモデルの基本構造
- HTML要素は、コンテンツ・パディング・ボーダー・マージンの4つの層で構成される。
- 各層は要素のサイズや配置に影響を与える。
box-sizing プロパティの活用
- デフォルトでは content-box が適用されるが、border-box を使用することでパディングやボーダーを含めたサイズ指定が可能。
マージン相殺の理解
- 隣接する要素間のマージンが合算されず、大きい方が適用される「マージン相殺」が発生する。

お疲れさまでした！

ボックスモデルの基本をしっかり身につけることで、より洗練されたレイアウトを作成する力が身につきます。

次回も頑張りましょう！

練習問題2-5：ボックスモデルを表示しよう

練習問題に挑戦する人はここをクリック！

【CSS】勉強猫がノートパソコンに向かい、練習問題に挑戦する様子。記事内の休憩用イラスト

VSCで「training2-5.html」と「training2-5.css」のふたつのファイルを作って保存してください。

そのファイルにコードを書き、ブラウザに以下のように表示させましょう。ただし、以下の条件に従うこと。

黒枠の外側ボックスの中に水色の内側ボックスが配置され、『内側のボックス』と表示されているHTMLとCSSのボックスモデル例

外側のボックス（.outer-box） を作成し、以下の設定を適用する：
- 幅: 400px、高さ: 250px
- パディング: 上下 30px、左右 50px
- ボーダー: 5px、実線、黒色
- マージン: 上下 40px、左右 自動（中央揃え）
- 背景色: lightgray
- box-sizing: border-box; を適用
内側のボックス（.inner-box） を作成し、以下の設定を適用する：
- 幅: 300px、高さ: 150px
- パディング: 20px
- ボーダー: 3px、点線、青色
- マージン: 上下 20px、左右 自動（中央揃え）
- 背景色: lightblue
- box-sizing: content-box; を適用
マージン相殺の現象を確認する:
- .inner-box の上下にマージン 20px を設定し、外側のボックスとの間隔を確認する。
- 親要素（.outer-box）に padding-top: 1px; を追加して、マージン相殺を防いでみる。
ボックスモデルのサイズを手計算する:
- コンテンツ、パディング、ボーダーを考慮し、各ボックスの「実際の表示サイズ（合計の幅と高さ）」を計算する。
- 計算結果とブラウザの表示を比較し、正しく理解できたか確認する。

もっと分かりやすい学習サイトにするために

この記事を読んで「ここが分かりにくかった」「ここが難しかった」等の意見を募集しています。

世界一わかりやすいHTML/CSS学習サイトにするため、ぜひ問い合わせフォームからご意見下さい。

<<前のページ

HTML/CSSの記事一覧

次のページ>>

初めてのWebサイトを作ろう2-5

このサイトの Lesson1-1（HTML学習の入り口）かLesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Webサイト制作に挑戦する人はここをクリック！

自分だけのWebサイト制作にはベースとなる基本セットが必要になります。

まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。

Lesson2-5のまとめノートと練習問題を追加しよう

このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。

１．練習問題の解答を保存

練習問題2-5で作成した２つのファイルを学習フォルダの中に保存しましょう。

training2-5.html ⇒ Lesson2フォルダに保存
training2-5.css ⇒ Lesson2フォルダの中のstyleフォルダに保存

トップページからリンクで飛べるようになりますので確認しましょう。

２．まとめノートを作成・保存

下記のHTMLコードは、このLesson2-5で紹介した内容を端的にまとめてブラウザ表示するためのコードです。

これをコピーして「MyWebsite2-5.html」という名前で保存し、「lesson2（学習フォルダ）」の中に保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson2-5</title>
    <link rel="stylesheet" href="style/styles-lesson2.css">
</head>
<body>

    <h1>Lesson2-5：ボックスモデルを理解しよう</h1>

    <div class="container">
        <h2>目的・要点</h2>
        <p>
            CSSの「ボックスモデル」は、ウェブページの要素がどのように配置され、
            サイズが決定されるかを理解するための基本概念です。
            すべてのHTML要素は見えない「ボックス」として扱われ、コンテンツ、
            パディング、ボーダー、マージンという4つの領域で構成されています。
        </p>

        <h2>本レッスンの到達目標</h2>
        <p>
            CSSボックスモデルの仕組みを理解し、それぞれのプロパティを適切に設定できるようになることです。
        </p>

        <h2>このレッスンで学習した内容</h2>

        <h3>CSSボックスモデルの構成要素</h3>
        <ul>
            <li><strong>コンテンツボックス（content box）</strong>: 実際のコンテンツ（テキストや画像など）が配置される領域。</li>
            <li><strong>パディングボックス（padding box）</strong>: コンテンツとボーダーの間の余白。</li>
            <li><strong>ボーダーボックス（border box）</strong>: パディングを囲む枠線。</li>
            <li><strong>マージンボックス（margin box）</strong>: 要素の外側の余白で、他の要素との間隔を確保。</li>
        </ul>

        <h3>各ボックスの設定方法</h3>
        <ul>
            <li><code>padding: 20px;</code> → 内側の余白を設定</li>
            <li><code>border: 2px solid black;</code> → ボーダーの太さ、スタイル、色を設定</li>
            <li><code>margin: 30px;</code> → 外側の余白を設定</li>
        </ul>

        <h3>ボックスサイズの計算方法</h3>
        <ul>
            <li><strong>デフォルト（content-box）</strong>: width や height に指定された値はコンテンツボックスに適用されるため、
                パディングやボーダーが追加されると全体のサイズが大きくなる。</li>
            <li><strong><code>box-sizing: border-box;</code> の活用</strong>: width や height にパディングとボーダーが含まれるため、
                指定したサイズのまま表示できる。</li>
        </ul>

        <h3>マージン相殺（margin collapse）</h3>
        <ul>
            <li>隣接する2つの要素の上下マージンが重なった場合、大きい方の値が適用され、合算されない現象。</li>
            <li>解決方法として、親要素に <code>padding</code> を設定するなどの方法がある。</li>
        </ul>

        <h2>トピック・豆知識</h2>
        <ul>
            <li><code>box-sizing</code> の設定を適切に行うことで、意図したレイアウトを作成しやすくなる。</li>
            <li>パディングとボーダーを適用すると、デフォルト設定では要素のサイズが変わるため、
                レイアウトが崩れる原因になることがある。</li>
            <li>マージン相殺を防ぐには、<code>display: flex;</code> や <code>overflow: hidden;</code> を活用する方法もある。</li>
        </ul>

        <h2>まとめ</h2>
        <p>
            本レッスンでは、CSSボックスモデルの基本構造と設定方法について学びました。
        </p>
        <p>
            ボックスモデルを適切に活用することで、意図したレイアウトやデザインを正確に実現できます。
        </p>
        <p><a href="../MyWebsite.html">トップページへ戻る</a></p>
    </div>

    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト＆問題集</p>
    </footer>

</body>
</html>

これでLesson2-5の作業は完了です。

継続は力なり。次のLessonも、引き続き頑張ってください^^

FAQ｜CSSボックスモデルに関するよくある質問

今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。

Q1. ボックスモデルの「padding」と「margin」の違いは何ですか？: 「padding」は要素の内容（テキストや画像など）とボーダーの間の余白であり、「margin」は要素自体の外側、他の要素との間隔を指します。どちらもボックスモデルで重要ですが、役割が異なるため使い分けることが大切です。

Q2. 「box-sizing: border-box」と「content-box」の使い分けはどうすればいいですか？: 「box-sizing: border-box」を使うと、widthやheightにpaddingやborderを含めたサイズ指定ができ、レイアウトが崩れにくくなります。一方、「content-box」はデフォルトの挙動で、widthやheightが内容部分のみを指します。複雑なレイアウトやレスポンシブデザインでは「border-box」がよく使われます。

Q3. ボックスモデルの理解がなぜCSSレイアウト設計で重要なのですか？: ボックスモデルを理解することで、要素間の余白やサイズ指定を正確にコントロールできるため、意図通りのレイアウトを作成できます。特に複数の要素が並ぶ場面では、marginやpaddingの使い分けやbox-sizingの指定がデザイン全体の品質や保守性に大きく影響します。

よくあるトラブルと解決法｜ボックスモデル編

今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。

思ったより余白が広く表示されてしまう

トラブルの原因と対処法を見る

トラブルの原因例

marginやpaddingが意図せず指定されている、または複数の要素に余白が重複して適用されている場合があります。

トラブルの解決法

各要素のmarginやpaddingの指定が重複していないか、開発者ツールなどで実際の余白サイズを確認し、不要な指定がないか調べてみましょう。

幅(width)や高さ(height)を指定したのに思った通りのサイズにならない

トラブルの原因と対処法を見る

トラブルの原因例

box-sizingプロパティの指定によって、widthやheightにpaddingやborderが含まれるかどうかが変わるため、想定外のサイズになることがあります。

トラブルの解決法

該当要素のbox-sizingがcontent-boxかborder-boxかを開発者ツールで確認し、意図したプロパティが使われているか調べてみましょう。

ボーダー(border)や余白(margin)がなぜか効いていないように見える

トラブルの原因と対処法を見る

トラブルの原因例

隣接する要素同士のmarginが相殺（マージン相殺）されている、または親要素にoverflow: hidden;やdisplay: flex;などのプロパティがある場合に、挙動が変わることがあります。

トラブルの解決法

marginやborderが指定通り表示されているか、親要素や周囲の要素のCSS指定を確認し、marginの相殺や親要素のレイアウトプロパティの影響がないか探してみましょう。

<<前のページ

HTML/CSSの記事一覧

次のページ>>

CSSボックスモデルの概要｜初心者が理解すべき基本概念

CSSボックスモデルの構成要素｜4つのボックスを徹底解説

コンテンツボックス（content box）｜内容領域の役割と特徴

補足：<div>タグとは？

パディングボックス（padding box）｜内側余白の使い方と影響

ボーダーボックス（border box）｜枠線エリアの役割と活用

マージンボックス（margin box）｜外側余白の使い方と注意点

CSSボックスモデルの適用方法

初期状態のボックスモデル挙動｜widthとheightの範囲を理解

box-sizing プロパティの使い方

まとめ

CSSマージンの相殺（margin collapse）

マージン相殺とは？｜重なり合う余白の仕組みを理解

CSSボックスモデルまとめ｜重要ポイントを総整理

学習したポイント

お疲れさまでした！

練習問題2-5：ボックスモデルを表示しよう

初めてのWebサイトを作ろう2-5

Lesson2-5のまとめノートと練習問題を追加しよう

１．練習問題の解答を保存

２．まとめノートを作成・保存

FAQ｜CSSボックスモデルに関するよくある質問

よくあるトラブルと解決法｜ボックスモデル編

思ったより余白が広く表示されてしまう

トラブルの原因例

トラブルの解決法

幅(width)や高さ(height)を指定したのに思った通りのサイズにならない

トラブルの原因例

トラブルの解決法

ボーダー(border)や余白(margin)がなぜか効いていないように見える

トラブルの原因例

トラブルの解決法

`box-sizing` プロパティの使い方