先生と生徒の会話形式で理解しよう

生徒

「先生、ホームページを作っていると、ボックス同士がくっついて見づらくなることがあります。どうすればいいんですか？」

先生

「とても良い質問ですね。CSSでは、ボックス同士の間に“余白”を作るためにmargin（マージン）という仕組みがあります。」

生徒

「マージンって聞いたことありますけど、どうやって使うんですか？」

先生

「では、実際にCSSのマージンの基本から見ていきましょう。これを覚えると、ボックスの間隔を自由に調整できるようになりますよ。」

1. マージンとは？CSSで作るボックスの外側の余白

マージン（margin）とは、HTML要素（ボックス）の外側にできる余白（すきま）のことです。簡単に言うと、「ボックスとボックスの間の距離」を決めるためのスペースです。

たとえば、名刺をテーブルに並べるときに、1枚1枚の間にすきまを作るようなイメージです。マージンを使えば、ボックスが窮屈に見えないように調整できます。


<style>
    div {
        border: 2px solid #333;
        margin: 20px;
        padding: 10px;
    }
</style>

<div>1つ目のボックス</div>
<div>2つ目のボックス</div>

ブラウザ表示

このように、margin: 20px;と書くと、ボックスの外側に20ピクセル分の余白が作られます。

2. マージンの方向を指定して調整する方法

マージンは、上下左右それぞれの方向に設定できます。

margin-top：上の余白
margin-right：右の余白
margin-bottom：下の余白
margin-left：左の余白

たとえば、上だけ広げたい場合はmargin-topを使います。


<style>
    p {
        border: 1px solid #666;
        margin-top: 30px;
    }
</style>

<p>上にだけ余白を作る例です。</p>

ブラウザ表示

このように方向を指定すれば、細かくデザインの調整ができます。

3. 4方向のマージンをまとめて指定する書き方

マージンは、4つの値をまとめて一度に指定することもできます。

書き方のルールは以下の通りです。

1つの値：すべて同じ余白（例：margin: 20px;）
2つの値：上下・左右（例：margin: 20px 10px;）
3つの値：上・左右・下（例：margin: 20px 10px 5px;）
4つの値：上・右・下・左（時計回り）（例：margin: 10px 20px 30px 40px;）


<style>
    div {
        border: 2px solid #666;
        margin: 10px 20px 30px 40px;
        padding: 10px;
    }
</style>

<div>上10px 右20px 下30px 左40pxのマージン</div>

ブラウザ表示

最初は少し覚えにくいですが、「上から時計回りに設定」と覚えると簡単です。

4. マージンが重なってしまう「マージンの相殺」に注意

実は、マージンを設定するときに少しだけ注意が必要です。上下にあるボックス同士のマージンは、重なって（相殺されて）しまうことがあります。

例えば、上のボックスにmargin-bottom: 20px;、下のボックスにmargin-top: 30px;がある場合、間のすきまは20＋30＝50pxではなく、大きい方の30pxだけになります。


<style>
    .box1 {
        border: 2px solid blue;
        margin-bottom: 20px;
    }
    .box2 {
        border: 2px solid red;
        margin-top: 30px;
    }
</style>

<div class="box1">上のボックス</div>
<div class="box2">下のボックス</div>

ブラウザ表示

このような現象を「マージンの相殺（margin collapse）」と呼びます。もし思ったより余白が狭いと感じたら、この影響を疑ってみましょう。

5. ボックス間の余白を調整して見やすくするコツ

マージンを使うときは、見た目のバランスを意識することが大切です。以下のポイントを意識するときれいに整います。

段落と段落の間に同じマージンを設定する
セクションごとに余白を多めに取る
上のマージンだけでなく下のマージンも調整してバランスを取る


<style>
    .content-box {
        border: 2px solid #555;
        padding: 10px;
        margin-bottom: 20px;
    }
</style>

<div class="content-box">サービス紹介</div>
<div class="content-box">お客様の声</div>
<div class="content-box">お問い合わせ</div>

ブラウザ表示

こうすることで、ボックス間に適度な空間ができ、読みやすく整ったデザインになります。

6. 中央に配置する便利なマージン指定「margin: 0 auto」

もうひとつ便利な使い方が、margin: 0 auto;です。これは「上下の余白は0、左右の余白は自動で調整する」という意味になります。

主にボックスを画面の中央に配置したいときに使います。


<style>
    .center-box {
        width: 200px;
        border: 2px solid #0088cc;
        margin: 0 auto;
        padding: 10px;
        text-align: center;
    }
</style>

<div class="center-box">中央に配置されたボックス</div>

ブラウザ表示

このように、簡単な指定だけでボックスを中央に表示できます。ブログのタイトルやボタンの位置調整などにもよく使われます。