1. marginとpaddingの基本的な違いを理解しよう

まず、margin（マージン）とpadding（パディング）は、どちらもCSS（カスケーディング・スタイル・シート）で使う「スペース（余白）」を作るプロパティです。

しかし、この2つには大きな違いがあります。

margin（マージン）：要素と要素の“外側”の空間を作る
padding（パディング）：要素の“内側”の空間を作る

たとえば、「箱（ボックス）」をプレゼントの箱にたとえると分かりやすいです。

箱の“外のスペース”が margin、箱の“中のクッション”が padding です。

2. marginとpaddingを図でイメージしてみよう

以下のようにイメージすると分かりやすいです。

margin（外側の余白） → 要素と他の要素との間隔を広げる。

padding（内側の余白） → 要素の中の文字や画像と、枠線（border）の間隔を広げる。

つまり、marginは“要素の外側”のスペース、paddingは“要素の内側”のスペースです。

3. 実際にCSSでmarginとpaddingを使ってみよう

次のコードを見てください。同じボックスに対して、marginとpaddingを設定しています。


<style>
.box {
    background-color: lightblue;
    border: 2px solid blue;
    margin: 20px;
    padding: 20px;
}
</style>

<div class="box">これはボックスの中のテキストです。</div>

ブラウザ表示

上のコードでは、青い枠線の外側にあるスペースが margin、枠線の内側で文字の周りにあるスペースが padding です。

4. marginとpaddingの方向を指定する方法

CSSでは、marginやpaddingを上下左右それぞれ別々に指定することもできます。


<style>
.box2 {
    background-color: lightgreen;
    border: 2px solid green;
    margin-top: 30px;
    margin-bottom: 10px;
    padding-left: 40px;
    padding-right: 10px;
}
</style>

<div class="box2">上下左右で余白を変えてみましょう。</div>

ブラウザ表示

このように、margin-top（上の余白）、margin-bottom（下の余白）、padding-left（左の余白）など、方向を指定するプロパティを使えば、細かい調整が可能です。

5. marginとpaddingを同時に使うときの注意点

marginとpaddingを同時に使うときは、どちらの余白がどこに影響しているかを意識することが大切です。

たとえば、ボックス同士の間隔を広げたいならmarginを使い、ボックスの中で文字をゆったり見せたいならpaddingを使います。

また、marginは「重なって消える」ことがあるので注意が必要です。これを「マージンの相殺（そうさい）」と呼びます。

特に、上下の要素同士でmarginを設定したときに起きやすいので、思ったより間が狭くなることがあります。

6. marginとpaddingのショートハンド（まとめ書き）

それぞれの方向をひとつひとつ書かなくても、次のように一括で指定する方法があります。


<style>
.box3 {
    background-color: pink;
    border: 2px solid red;
    margin: 10px 20px 30px 40px; /* 上 右 下 左 の順 */
    padding: 5px 15px 25px 35px; /* 上 右 下 左 の順 */
}
</style>

<div class="box3">ショートハンドで余白を設定しています。</div>

ブラウザ表示

上のように4つの値を指定する場合は、上・右・下・左の順番で設定します。2つや3つの値を指定した場合も自動的にそれぞれの方向に適用されるルールがあります。

7. marginとpaddingを使いこなすコツ

実際のWebデザインでは、marginは「要素と要素の距離」を調整するために使い、paddingは「要素の中の見やすさ」を整えるために使います。

たとえば、ボタンの内側を広く見せたいときはpaddingを増やし、ボタン同士の間隔を広げたいときはmarginを増やします。


<style>
button {
    background-color: orange;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px;
}
</style>

<button>ボタン1</button>
<button>ボタン2</button>

ブラウザ表示

この例では、paddingによってボタンの中の文字がゆったりし、marginによってボタン同士の間隔が広くなっています。