初心者必見！marginとpaddingの違いを徹底解説

2025年2月26日

marginとpaddingの違いを理解しよう！初心者向けCSSレイアウト講座

Webデザインにおいて、要素同士の間隔を調整することはとても重要です。そのときに使うのが margin と padding です。この2つはどちらも「余白」を設定しますが、実際には役割が異なります。
この記事では、初心者でも分かりやすく margin と padding の違いを解説し、実際のコード例を使ってその使い方を説明します！

margin とは？

margin は、要素の外側の余白を設定するプロパティです。隣り合う要素やページの端との間隔を調整するために使います。

ポイント

要素と他の要素の間隔を調整する。
例えば、「ボタン」と「テキスト」の間隔を空けたいときに使います。

コード例: margin の基本

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marginの例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            margin: 20px; /* 要素の外側に20pxの余白を設定 */
        }
    </style>
</head>
<body>
    <div class="box">これはMarginの例です。</div>
    <div class="box">もう1つのボックス</div>
</body>
</html>

結果:

各ボックスの外側に20pxの余白が作られ、要素同士が離れます。

padding とは？

padding は、要素の内側の余白を設定するプロパティです。要素の中にあるコンテンツ（例えば文字や画像）が、要素の端からどれだけ離れるかを調整します。

ポイント

要素の内側の空間を広げる。
例えば、「ボタンのテキストをボタンの端から少し離す」といった調整に使います。

コード例: padding の基本

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paddingの例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightcoral;
            padding: 20px; /* 要素の内側に20pxの余白を設定 */
        }
    </style>
</head>
<body>
    <div class="box">これはPaddingの例です。</div>
</body>
</html>

結果:

ボックスの内側に20pxの余白ができ、文字がボックスの端から離れます

margin と padding の違いを図で説明

プロパティ	説明	影響する場所
margin	要素の外側の余白を設定。隣接要素との間隔を調整	外側の余白
padding	要素の内側の余白を設定。内容を要素の端から離す	内側の余白

図で見ると、このような関係です：

margin

div要素

padding

テキスト

両方を使った実践例

margin と padding を組み合わせると、要素の見た目や配置をもっと自由に調整できます。

コード例: margin と padding を併用

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MarginとPaddingの例</title>
    <style>
        .box {
            width: 200px;
            background-color: lightgreen;
            margin: 20px; /* 外側の余白 */
            padding: 15px; /* 内側の余白 */
            border: 2px solid black; /* ボーダーを追加 */
        }
    </style>
</head>
<body>
    <div class="box">外側と内側に余白があります。</div>
</body>
</html>

結果:

要素の外側に20pxの余白。
内側に15pxの余白があり、文字がボックスの端にくっつかなくなります。

よくある疑問と注意点

margin と padding を間違えないコツ

「隣の要素との距離 → margin」

「要素内の文字や画像との距離 → padding」

margin の「相殺」に注意

上下のmarginは重なる場合があります。例えば、2つのボックスにそれぞれmargin: 20px;を設定すると、間隔は20pxではなく1つ分の20pxになります。

まとめ

margin: 要素の外側に余白を作る → 隣り合う要素やページの端との距離を調整

padding: 要素の内側に余白を作る → コンテンツとボックスの端との距離を調整

この2つを使い分けることで、Webページのレイアウトが自由にデザインできます。初心者の方は、実際にコードを書きながら体感してみてください！

初心者講座:目次

comment コメントをキャンセル

: スマホ・タブレットにて横向きにしてサイトを見られたくない場合の処理

サイト作成していると横向きで見られたくない(対応が面倒)な時があります。横向きになった場合に、ウィンドウを出して「横向き対応してません」と表示して見せないようにします。本ページでは実際に横向きにし ...

CSS HTML JavaScript

: 【第5回】たくさんのデータをまとめて扱う！PHPの「配列」入門

chatGPTに記事を書いてもらってますプログラムでは、「たくさんのデータをまとめて使いたい」場面がよくあります。そんなときに便利なのが配列（はいれつ）です！配列ってなに？配列とは、複数の ...

HTML PHP

: クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

制作理由ワードプレスのクラシックエディタを直接使っているといつも思うことがありましたコード追加ボタンを自由に追加出来たら便利じゃない？この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...

HTML WordPress プラグイン

: クラシックエディタ用のプラグインを作ってみた

制作理由ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！この記事を書くまでは入れないか、スペースキーを押して誤 ...

HTML WordPress プラグイン

: CSSで作るコンテンツを縦に展開・収納できるアコーディオンメニュー

コンテンツを縦に展開・収納できるアコーディオンメニューは、動きのあるUIの定番です。 Section 1 DX（デジタルトランスフォーメーション）の実現「デジタルトランスフォーメーション（DX）は、 ...

CSS HTML

Webデザインの第一歩！文字と背景を自由にカスタマイズしよう

marginとpaddingを完全理解！CSSで余白を自在に操る方法

初心者必見！marginとpaddingの違いを徹底解説

marginとpaddingの違いを理解しよう！初心者向けCSSレイアウト講座

margin とは？

margin は、要素の外側の余白を設定するプロパティ です。隣り合う要素やページの端との間隔を調整するために使います。

ポイント

結果:

ポイント

結果:

margin と padding の違いを図で説明

両方を使った実践例

結果:

よくある疑問と注意点

margin と padding を間違えないコツ

margin の「相殺」に注意

まとめ

margin は、要素の外側の余白を設定するプロパティです。隣り合う要素やページの端との間隔を調整するために使います。