CSSのマージンを完全ガイド！初心者でもわかるボックス間の余白調整の方法

複数ボックス間の余白調整に便利なマージンの使い方

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

生徒

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

先生

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

生徒

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

先生

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

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

マージン（margin）とは、HTML要素（ボックス）の外側に作られる余白のことです。Webデザインにおいて、要素と要素がくっつきすぎないように「適切な距離感」を保つ役割を持っています。

イメージとしては、机の上にノートを並べる時の「ノート同士の隙間」のようなものです。マージンを正しく設定することで、ユーザーにとって読みやすく、圧迫感のないスッキリとしたレイアウトを実現できます。

ポイント： CSSには「margin」と「padding」がありますが、marginは境界線の「外側」、paddingは境界線の「内側」の余白を指します。

プログラミング未経験の方でも、以下のサンプルコードを見れば仕組みは簡単です。2つのボックスの間にどれくらいの隙間ができるか注目してみましょう。


<style>
    .box-container {
        border: 2px solid #333;
        background-color: #f9f9f9;
        /* ボックスの外側に20pxの余白を作る */
        margin: 20px;
        padding: 15px;
    }
    .sample-text {
        color: #555;
        font-weight: bold;
    }
</style>

<div class="box-container">
    <p class="sample-text">1つ目のボックス：外側に20pxの隙間があります。</p>
</div>
<div class="box-container">
    <p class="sample-text">2つ目のボックス：上のボックスとの間に距離が生まれます。</p>
</div>

ブラウザ表示

このように、margin: 20px;と1行記述するだけで、上下左右すべての方向に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>

ブラウザ表示

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