余白の基本（margin と padding）

先生、今まで幅や高さを学んだんですが、要素同士がくっついて見づらいんです。要素の間に空間を作るにはどうすればいいんですか？

それは余白の設定が必要だね。CSSには2つの重要な余白プロパティがあるんだ。marginとpaddingという2つの違いを理解すれば、レイアウトが格段に美しくなるよ。

余白って2つもあるんですか？どう使い分けるんでしょう？

marginは要素の外側の余白、paddingは要素の内側の余白なんだ。この違いを理解することで、思い通りのレイアウトが作れるようになる。まずはボックスモデルという重要な概念から学んでいこう。

ボックスモデルとは

Webページの全ての要素は「ボックス」として扱われており、このボックスは4つの領域で構成されています。この仕組みをボックスモデルと呼びます。

ボックスモデルの構成

ボックスモデルは外側から内側に向かって、以下の4つの領域で構成されています。

コード例

以下は、ボックスモデルの各領域を設定するCSSコード例です。

/* ボックスモデルの各領域を設定 */
.box {
    margin: 20px;               /* 外側余白 */
    border: 5px solid #F0E68C;  /* 枠線 */
    padding: 15px;              /* 内側余白 */
}

対応するHTML:

<div class="box">
    コンテンツ領域 色なし
</div>
<div class="box">
    コンテンツ領域 色付き
</div>

試してみよう

実際にボックスモデルを視覚的に確認してみましょう。以下のコードエディタで、boxクラスのmarginとpadding、borderの値を変更して、要素の見た目がどのように変わるか試してみてください。

2つのボックスに分けて、片方のコンテンツ領域には背景色を付けています。これにより、paddingの内側余白がより明確になり、marginとの違いが視覚的に理解しやすくなります。

ボックスモデルの各領域を視覚的に確認できるのは面白いですね！特に、marginとpaddingの違いがわかりやすいです。

ボックスモデルを理解することで、要素の配置や間隔をより正確にコントロールできるようになるよ。次に、marginとpaddingの具体的な使い方を見ていこう。

margin（外側余白）の基本

marginは要素の外側に空間を作るプロパティです。他の要素との間隔を調整したり、要素をページ内で配置したりする際に使用します。

marginの基本的な書き方

marginプロパティには、大きく分けて2つの指定方法があります。

個別指定

上下左右の余白をそれぞれ個別に指定する方法です。細かく調整したい場合に適しています。

/* 個別指定の書き方 */
.box {
    margin-top: 10px;    /* 上の余白 */
    margin-right: 20px;  /* 右の余白 */
    margin-bottom: 30px; /* 下の余白 */
    margin-left: 40px;   /* 左の余白 */
}

省略記法

marginは値の個数によって、異なる意味を持ちます。この省略記法を覚えると、効率的にCSSを書けるようになります。

/* 省略記法の例 */
.box-1 { margin: 20px; }             /* 全方向20px */
.box-2 { margin: 10px 20px; }        /* 上下10px、左右20px */
.box-3 { margin: 10px 20px 30px; }   /* 上10px、左右20px、下30px */
.box-4 { margin: 10px 20px 30px 40px; } /* 上10px、右20px、下30px、左40px */

marginの実践例

以下のエディタでmarginの効果を実際に確認してみましょう。異なるmargin値を試して、要素間の距離がどのように変化するか観察してください。

省略記法が便利ですね！でも4つの値の順番を覚えるのが難しそうです。

「時計回り」で覚えるといいよ。上から始まって、右、下、左の順番。12時→3時→6時→9時の順だね。慣れるとすぐに覚えられるよ。

margin: autoの活用

marginの最も便利で実用的な機能がauto値による中央寄せです。Webデザインでは非常によく使われる技術です。

/* 要素を中央寄せ（最も一般的） */
.center-box {
    width: 200px;
    margin: 0 auto;  /* 上下0、左右auto */
}

/* 個別指定での中央寄せ */
.center-box-individual {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

margin: autoの実例

最も実用的な中央寄せパターンを確認してみましょう。

margin: autoって、どういう仕組みで中央寄せになるんですか？

ブラウザが利用可能な余白を自動計算して、左右に均等に配分するんだ。ただし、幅（width）が指定されていることが前提条件だよ。

widthが指定されていないとautoが効かないんですね。

その通り！ブロック要素は初期状態で幅100%になるから、余白が存在しないんだ。明示的にwidthを指定することで、初めて余白が生まれてautoが機能するよ。

padding（内側余白）の基本

paddingは要素の内側に空間を作るプロパティです。コンテンツと境界線（border）の間に余白を設定し、要素内部のスペースを調整します。

paddingの基本的な書き方

paddingプロパティも、marginと同様に2つの指定方法があります。

個別指定

上下左右のpadding（内側余白）をそれぞれ個別に指定する方法です。細かく調整したい場合に適しています。

/* 個別指定の書き方 */
.box {
    padding-top: 10px;    /* 上の内側余白 */
    padding-right: 20px;  /* 右の内側余白 */
    padding-bottom: 30px; /* 下の内側余白 */
    padding-left: 40px;   /* 左の内側余白 */
}

省略記法

paddingの省略記法はmarginと全く同じルールです。値の個数によって異なる意味を持ちます。

/* 省略記法の例 */
.box-1 { padding: 20px; }             /* 全方向20px */
.box-2 { padding: 10px 20px; }        /* 上下10px、左右20px */
.box-3 { padding: 10px 20px 30px; }   /* 上10px、左右20px、下30px */
.box-4 { padding: 10px 20px 30px 40px; } /* 上10px、右20px、下30px、左40px */

paddingの書き方はmarginと同じなんですね。でも使う場面が違うんでしょうか？

そうだね。paddingは要素の内側の余白だから、主にテキストや画像とその枠線の間にスペースを作りたい時に使うんだ。ボタンやカードのデザインでよく使われるよ。

paddingの実践例

以下のエディタでpaddingの効果を実際に確認してみましょう。異なるpadding値を試して、要素内部の余白がどのように変化するか観察してください。

paddingを変更すると、テキストと枠線の距離が変わるのがよくわかりますね！

その通り！paddingは要素の内側の余白だから、コンテンツの周りにスペースができる。ボタンデザインなんかでは、paddingを調整してクリックしやすいサイズにするのが一般的だよ。

paddingの背景色適用例

paddingには背景色が適用される点も重要な特徴です。以下の例で、paddingの有無による背景色の違いを確認してみましょう。

paddingがある要素は、背景色が内側余白の部分まで表示されているんですね。

そこがpaddingの重要なポイントだよ。marginは要素の外側だから背景色は適用されないけど、paddingは要素の内側だから背景色も一緒に広がるんだ。この特徴を活かして、カードやボタンのデザインを作ることが多いね。

marginとpaddingの使い分け

先生、marginとpaddingの違いは理解できましたが、実際にどっちを使うべきか迷うことがありそうです。

確かに、最初は迷うよね。でも基本的な判断基準を覚えておけば、適切に使い分けできるようになるよ。まずは基本原則を理解しよう。

使い分けの基本原則

marginとpaddingの使い分けは、何のための余白なのかを考えることが重要です。

実践的な使い分け例

実際のWebデザインでよく使われるパターンを見てみましょう。以下の例で、marginとpaddingがどのように使い分けられているか確認してください。

ボタンにpaddingを使うのは、クリックしやすくするためなんですね！

その通り！paddingはクリック範囲も広げるから、ユーザビリティの向上につながる。一方、要素同士の距離調整にはmarginを使っているのがわかるかな。

値の単位と特別な値

先生、marginやpaddingに指定できる値について詳しく教えてください。pxだけでなく、他の単位も使えるんですか？

もちろん！CSSでは様々な単位が使えるし、特別な値もあるんだ。レスポンシブデザインでは単位の選択がとても重要になるよ。

使用できる単位

marginとpaddingには、CSSで使用できる様々な長さの単位を指定できます。実際のWeb開発では、以下の単位が主に使用されています。

よく使われる単位（推奨）

特殊な場面で使われる単位

Web開発では使用しない単位

実用例の比較

以下のエディタで、異なる単位がどのように動作するか確認してみましょう。

画面サイズを変えると、vw指定の要素の余白も変わるんですね！

その通り！vwやvhはレスポンシブデザインで威力を発揮するよ。でも使いすぎると予期しない動作をすることもあるから注意が必要だね。

特別な値（autoと負の値）

marginとpaddingには、数値以外の特別な値も指定できます。

margin: autoによる自動配置

margin: autoは、利用可能な空間を自動的に計算して配分します。先の中央寄せ以外にも、要素の右寄せや左寄せにも応用できます。

/* 基本的な中央寄せ */
.center {
    width: 200px;
    margin: 0 auto;        /* 上下0、左右auto */
}

/* 右寄せ */
.right-align {
    width: 200px;
    margin-left: auto;     /* 左側に最大余白 */
}

/* 左寄せ（デフォルトと同じ） */
.left-align {
    width: 200px;
    margin-right: auto;    /* 右側に最大余白 */
}

marginの負の値による重複配置

marginには負の値を指定でき、要素を重ねたり特殊な配置ができます。

.box1 {
    margin-bottom: 10px;
}
/* 負のmarginで要素を重ねる */
.box2 {
    margin-top: -20px;
}

実際の例

以下のエディタで、auto指定による右寄せと、負のmarginによる要素の重なりを確認してみましょう。

負の値を使うと、要素を重ねることができるんですね。でもこれって使い所が難しそうです。

そうだね。負のmarginは強力だけど、レイアウトが複雑になりがち。現代ではFlexboxやGridを使う方が推奨されることが多いよ。でも、微調整には便利な機能なんだ。

要素のサイズ計算とbox-sizing

先生、marginとpaddingの違いは理解できましたが、要素の実際のサイズがどう計算されるのかも知りたいです。

了解！要素のサイズ計算はWebデザインで非常に重要な概念だよ。特にpaddingやborderが加わると、見た目のサイズが変わるから注意が必要なんだ。

要素サイズ計算の基本

CSSのデフォルトでは、widthはコンテンツ領域の幅のみを表します。そのため、paddingやborderが追加されると、要素の実際の幅と高さは指定した値より大きくなるので注意が必要です。

計算式

よくある勘違い：カードレイアウトの失敗例

実際のWebサイト制作でよくある失敗例を見てみましょう。

「幅200pxの親要素に100pxずつのカードを2つ並べる」という一見簡単そうなレイアウトが、なぜうまくいかないのかを確認してください。

<div class="parent">
    <div class="card">カード1</div>
    <div class="card">カード2</div>
</div>

あ！カードが2つともはみ出してる！100px × 2 = 200pxのはずなのに…

そうなんだ。これがデフォルト計算（content-box）の落とし穴なんだよ。指定したwidthはコンテンツ領域のみの幅で、paddingとborderが追加されるから実際のサイズは大きくなってしまうんだ。

デフォルト計算方式

上記の例では、.card要素が指定したwidth（100px）より実際には大きくなっています。

このため、2つのカードを横に並べると、144px × 2 = 288pxとなり、親要素の200pxを大きく超えてしまいます。

box-sizingプロパティによる解決

box-sizing: border-boxを指定すると、widthとheightがpaddingとborderを含んだ全体サイズを表すようになります。これにより、より直感的なサイズ計算が可能になります。

設定例

.card {
    box-sizing: border-box;
    width: 100px;
    padding: 20px;
    border: 2px solid #999;
}

box-sizingの種類

「border-box」を指定した場合の計算式の変化

表示例

以下のエディタで、同じwidthを指定してもbox-sizingによってサイズが変わることを確認してみましょう。

計算の詳細例

box-sizing: border-boxでは、以下のように計算されます：

border-boxの方が直感的で使いやすそうですね！なぜデフォルトがcontent-boxなんでしょう？

歴史的な理由なんだ。CSSが作られた当初の考え方では、コンテンツサイズを基準に考えていたんだね。でも実際の制作では、全体サイズで考える方が自然だから、現代では多くのプロジェクトでborder-boxを使っているよ。

理解度チェッククイズ

これまで学んだmarginとpaddingの知識を確認してみよう。実際のコードを見ながら答えてみてね。

.box {
  width: 200px;
  padding: 15px;
  border: 5px solid blue;
  margin: 10px;
}

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid red;
}

<div class="container">
  <button class="btn">ボタン1</button>
  <button class="btn">ボタン2</button>
</div>

まとめ

marginとpaddingの違いがよく分かりました！特にbox-sizingの概念は目からウロコでした。

実際のコード例を見ながら学べたので、どんな時にどちらを使えばいいかイメージできるようになりました。

そうだね。margin、padding、そしてbox-sizingは、Webデザインの基礎中の基礎だから、しっかりマスターしておこう。これらを理解することで、レイアウト作成がずっと楽になるよ。