【html&css】paddingとmarginの違いは？上下左右の余白と順番

2026年3月9日2026年3月16日

Webページにおいて余白は重要なデザインの一つです。

本記事では、padding（内側の余白）とmargin（外側の余白）について解説します。

また、HTML&CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のHTML&CSSページをご確認ください。

HTML&CSS | Code Stock

CSSのpaddingとmarginとは

padding（パディング） = 「要素の内側の余白」
margin（マージン） = 「要素の外側の余白」

CSSでは、要素周りの余白をpadding（パディング）とmargin（マージン）といったプロパティで指定します。

paddingとmarginについて

paddingとmarginの違い
CSSにおける余白の考え方（ボックスモデル）
<p>タグによる実例
<img>タグによる実例

paddingとmarginの違い

CSSで余白を作る際、paddingとmarginで迷う人は多いです。

結論は、「枠線の内側か、外側か」といった明確な違いがあります。

padding（要素の内側の余白）
要素の枠線から内側に作られる余白です。
要素が内側から膨らむイメージで背景色や背景画像を指定するとpaddingの余白部分にも色が塗られます。
margin（要素の外側の余白）
要素の枠線から外側に作られる余白です。
要素と要素を遠ざけたい時に使います。
marginの余白部分は「透明」になり、背景色は適用されません。

2つの箱を並べ、マウスを乗せた時「余白がどこにできるか」をアニメーションで体感できるサンプルコードです。

直感的に、枠線を基準にmargin（外側の余白）とpadding（内側の余白）を理解できると思います。

▼ マウスを乗せてみよう

margin
（外側の余白）

▼ マウスを乗せてみよう

padding
（内側の余白）

HTMLコード表示

<div class="pm-demo-container">

  <div>
    <div class="demo-label">▼ マウスを乗せてみよう</div>
    <div class="demo-margin-wrapper">
      <div class="demo-box">margin<br>（外側の余白）</div>
    </div>
  </div>

  <div>
    <div class="demo-label">▼ マウスを乗せてみよう</div>
    <div class="demo-padding-wrapper">
      <div class="demo-box">padding<br>（内側の余白）</div>
    </div>
  </div>
</div>

CSSコード表示

.pm-demo-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    background-color: #f5f5f5;
    padding: 40px 20px;
    font-family: sans-serif;
    text-align: center;
}

.demo-box {
    box-sizing: content-box;
    width: 150px;
    height: 100px;
    background-color: #bbdefb;
    border: 3px solid #1976d2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #333;
    transition: 0.4s ease;
    cursor: pointer;
}

.demo-margin-wrapper {
    background-color: transparent;
    border: 1px dashed transparent;
    padding: 0;
    transition: background-color 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
}
.demo-margin-wrapper:hover {
    background-color: #ffe0b2;
    border-color: #f57c00;
    padding: 30px;
}
.demo-margin-wrapper:hover .demo-box {
    background-color: #bbdefb;
}

.demo-padding-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.demo-padding-wrapper:hover .demo-box {
    padding: 30px;
    background-color: #c8e6c9;
}

.demo-label {
    font-size: 14px;
    margin-bottom: 10px;
    color: #555;
}

CSSにおける余白の考え方（ボックスモデル）

paddingとmarginを使いこなすには、「ボックスモデル（Box Model）」といった概念を理解する必要があります。

ボックスモデルの4つの層

Content（コンテンツ）
役割: テキストや画像そのものが入る一番内側の領域
width/heightが適用される範囲
Padding（パディング）
役割: コンテンツと枠線の間の「内側の余白」
Border（ボーダー）
役割: パディングの外側を囲む「枠線」
Margin（マージン）
役割: 枠線の外側にある「隣の要素との距離（外側の余白）」

margin（外側の距離）

border（境界線・枠線）

padding（内側の余白）

content
（テキストや画像などの本体）

widthとheightを考慮したボックスモデルを詳しく知りたい人は「【html&css】width（横幅）とheight（高さ）の指定とボックスモデル」を一読ください。

【html&css】width（横幅）とheight（高さ）の指定とボックスモデル

<p>タグによる実例

実際に<p>タグ（段落）を使い、余白の動きを確認していきます。

ただし、widthとheightの指定に注意が必要です。

「指定した幅や高さにpaddingとborderサイズが足し算される」ということです。

例えばwidth: 200px;の箱にpadding: 20px;をつけると、見た目の幅は「200 + 20(左) + 20(右) = 240px」に横に広がります。

これを防ぐために、Web制作ではbox-sizing: border-box;といったプロパティをセットで指定するのが鉄則です。

コンテンツ領域
(width/height)

※枠線の「外側」がmargin、「内側」がpaddingです。
背景色（緑）はpaddingの領域まで塗られているのが分かります。

HTMLコード表示

<div class="box-model-demo">
  <div class="demo-wrapper">
    <p class="demo-p">
      <span class="demo-content">コンテンツ領域<br>(width/height)</span>
    </p>
  </div>
  <p class="guide-text">※枠線の「外側」がmargin、「内側」がpaddingです。<br>背景色（緑）はpaddingの領域まで塗られているのが分かります。</p>
</div>

CSSコード表示

.box-model-demo {
  background-color: #f0f0f0;
  padding: 40px;
  text-align: center;
  font-family: sans-serif;
}
    
/* 外側の要素（marginを可視化するための背景） */
.demo-wrapper {
  background-color: #fce4ec;
  display: inline-block;
  transition: 0.3s;
}

/* pタグ本体の設定 */
.demo-p {
/* widthとheightの指定 */
  width: 250px;
  height: 100px;
/* 余白の指定 */
  margin: 30px;    /* 外側の余白 */
  padding: 20px;   /* 内側の余白 */
/* 見た目の設定 */
  background-color: #e8f5e9;
  border: 5px solid #333;
/* ボックスサイズの計算方法（はみ出し防止） */
  box-sizing: border-box;
      
  /* テキストの中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: 0.3s;
}

/* 中のコンテンツ領域（水色） */
.demo-content {
  background-color: #e1f5fe;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-text {
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}

<img>タグによる実例

画像を表示する<img>タグに対しても余白は有効です。

<img>タグの使い方として、以下の2パターンを覚えておきましょう。

paddingを使って枠を作る
画像にpaddingを指定し、背景色とborderをつけることで写真フレームのようなおしゃれなデザインを作れます。
marginを使って画像を中央揃えにする
画面に中央配置したい時margin: 0 auto;（左右のマージン自動計算）といったテクニックが使われます。
ただし<img>タグはインライン要素のため、marginのautoが効きません。
display: block;とセットで指定するのがポイントです。

画像にpaddingでフレームを作り、marginで中央揃えと他要素との距離を確保するサンプルです。

上のテキストです。ここから画像までの距離は「margin-top: 30px;」で空けています。

下のテキストです。画像からここまでの距離も「margin-bottom: 30px;」で空けています。画像の白いフレームは「padding」で作られています。

HTMLコード表示

<div class="img-demo-container">
  <p class="demo-text">上のテキストです。ここから画像までの距離は「margin-top: 30px;」で空けています。</p>
  <img src="https://placehold.jp/300x200.png?text=Sample+Image" alt="サンプル画像" class="demo-img">
  <p class="demo-text">下のテキストです。画像からここまでの距離も「margin-bottom: 30px;」で空けています。画像の白いフレームは「padding」で作られています。</p>
</div>

CSSコード表示

.img-demo-container {
  background-color: #e0e0e0;
  padding: 30px;
  text-align: left;
}
.demo-text {
  margin-bottom: 0;
}
.demo-img {
  /* ① 画像の中央揃えセット */
  display: block;
  margin: 30px auto; /* 上下に30pxの余白、左右はautoで中央揃え */
  /* ② paddingを使った写真フレーム風デザイン */
  padding: 10px 10px 30px 10px; /* 上・右・下・左（下だけ太くする） */
  background-color: #ffffff; /* padding部分の背景を白に */
  border: 1px solid #ccc;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.2); /* 少し影をつける */
  /* 画像の最大幅を指定してはみ出し防止 */
  max-width: 100%;
  height: auto;
}

paddingとmarginの書き方

余白を指定するpaddingとmarginは、効率よく書くパターンがあります。

「1か所指定したいのか」「4方向に同じ余白を入れたいのか」など、状況に合わせて使い分けられると便利です。

paddingとmarginの書き方について

上下左右の余白をまとめて同じ値にする（値1つ）
「特定の1方向だけ」を余白指定する（個別指定）
「上下」と「左右」をセットでまとめて余白指定する（値2つ）
「上」「左右」「下」をまとめて余白指定する（値3つ）
「上/右/下/左」別々の数値を一行で指定する（値4つ）

値の数による違いを以下の一覧表からも確認できます。

指定する値の数	書き方の例	適用される順番・場所
1つ	`10px;`	上下左右すべて同じ
2つ	`10px 20px;`	①上下 ②左右
3つ	`10px 20px 30px;`	①上 ②左右 ③下
4つ	`10px 20px 30px 40px;`	上から時計回り（上・右・下・左）

上下左右の余白をまとめて同じ値にする（値1つ）

数値を1つだけ書くと、「上下左右の4方向」に同じ余白が適用されます。

paddingとmarginどちらも同じ使い方です。

上下左右すべてに「20px」のpaddingがついています。

上下左右すべてに「20px」のmarginがついています。

HTMLコード表示

<div class="box-all-padding">
  上下左右すべてに「20px」のpaddingがついています。
</div>
<div class="box-all-margin">
  上下左右すべてに「20px」のmarginがついています。
</div>

CSSコード表示

.box-all-padding {
  padding: 20px;
  
  background-color: #3498db;
  color: white;
  border: 2px solid #2980b9;
}

.box-all-margin {
  margin: 20px;
  
  background-color: #3498db;
  color: white;
  border: 2px solid #2980b9;
}

「特定の1方向だけ」を余白指定する（個別指定）

「特定の1方向だけ余白指定したい」といった場合は、プロパティ名に -top など方向（ハイフンと英語）を追加して指定します。

上：padding-top / margin-top
下：padding-bottom / margin-bottom
左：padding-left / margin-left
右：padding-right / margin-right

他方向に影響を与えず、ピンポイントで微調整したい時に使います。

左側（left）にだけ「40px」の大きなpaddingをつけています。

左側（left）にだけ「40px」の大きなmarginをつけています。

HTMLコード表示

<div class="box-single-padding">
  左側（left）にだけ「40px」の大きなpaddingをつけています。
</div>
<div class="box-single-margin">
  左側（left）にだけ「40px」の大きなmarginをつけています。
</div>

CSSコード表示

.box-single-padding {
  padding-left: 40px; /* 左側だけ指定 */
  /* padding-top: 10px; のように複数並べて書くことも可能 */

  background-color: #2ecc71;
  color: white;
  border: 2px solid #27ae60;
}

.box-single-margin {
  margin-left: 40px; /* 左側だけ指定 */
  /* margin-top: 10px; のように複数並べて書くことも可能 */

  background-color: #2ecc71;
  color: white;
  border: 2px solid #27ae60;
}

「上下」と「左右」をセットでまとめて余白指定する（値2つ）

半角スペースを空けて数値を2つ並べると、1つ目の数値が「上下」、2つ目の数値が「左右」の余白として適用されます。

上下10px / 左右30pxのボタン

HTMLコード表示

<a href="#" class="btn-style">
  上下10px / 左右30pxのボタン
</a>

CSSコード表示

.btn-style {
  padding: 10px 30px; /* 1つ目:上下、2つ目:左右 */
  
  display: inline-block;
  background-color: #e74c3c;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

ボタンは「上下は狭め、左右は広め」に余白を取ると綺麗に見えます。

「上」「左右」「下」をまとめて指定する（値3つ）

半角スペースで数値を3つ並べるパターンです。

順番は「上」→「左右」→「下」になります。

「左右は均等にしたいが、上下の余白は違う大きさにしたい」といった場合に便利です。

上20px / 左右50px / 下5px のpadding

HTMLコード表示

<div class="box-three">
  上20px / 左右50px / 下5px のpadding
</div>

CSSコード表示

.box-three {
  padding: 20px 50px 5px; /* 上・左右・下 の順 */

  background-color: #f1c40f;
  color: #333;
  border: 2px solid #f39c12;
}

例えば、見出し要素のmarginで「上は大きく空け、下は少しだけ空ける（左右はゼロ）」という場合、margin: 40px 0 10px;と一行で書けます。

「上/右/下/左」別々の数値を一行で指定する（値4つ）

数値を4つ並べると、4方向に別々の余白を指定できます。

「上から始まって時計回り」といった形で覚えるとよいです。

左から順に「上・右・下・左」といった順番で適用されます。

個別指定（padding-top, padding-right…）を4行書くよりコードが短くて済みます。

上10px / 右20px / 下30px / 左40px のpadding
（上から時計回り！）

HTMLコード表示

<div class="box-four">
  上10px / 右20px / 下30px / 左40px のpadding<br>
  （上から時計回り！）
</div>

CSSコード表示

.box-four {
  padding: 10px 20px 30px 40px; /* 上・右・下・左（時計回り） */

  background-color: #9b59b6;
  color: white;
  border: 2px solid #8e44ad;
}

paddingとmarginの値を%指定する

レスポンシブデザイン（スマホ対応）が当たり前になった現在、画面サイズに合わせて余白も柔軟に変化させたい場面で%指定が活躍します。

%指定について

%指定の考え方と計算
borderを追加したい場合はどうするべきか
%指定の実践的な利用例

%指定の考え方と計算

%で余白を指定する際、基準は「親要素（外側の箱）」サイズです。

「上下（top/bottom）の余白を%指定した場合でも、基準は親要素の『高さ』ではなく『横幅』である」ということです。

ブラウザは、上下左右の%余白を「親の横幅」だけを基準にして計算します。

親の横幅が広がれば、上下の余白も連動して大きくなることを覚えておきましょう。

親の箱（横幅: 400px）

padding: 10%;
margin: 10%;
親の横幅（400px）の10%なので、
上下左右すべて「40px」の余白になります！
（※高さは一切関係ありません）

HTMLコード表示

<div class="parent-box">
  <p>親の箱（横幅: 400px）</p>
  
  <div class="child-box">
    <strong>padding: 10%;<br>margin: 10%;</strong><br>
    親の横幅（400px）の10%なので、<br>
    上下左右すべて「40px」の余白になります！<br>
    （※高さは一切関係ありません）
  </div>
</div>

CSSコード表示

.parent-box {
  width: 400px; /* 基準となる親の横幅 */
  height: 600px; /* 高さは余白の計算には影響しません */
  background-color: #e0e0e0;
  border: 2px solid #333;
}

.child-box {
  background-color: #3498db;
  color: white;
  
  /* 親の横幅(400px)の10% ＝ 40px になる */
  padding: 10%;
  margin: 10%; 
}

borderを追加したい場合はどうするべきか

余白を%で指定した箱にデザインとしてpx指定のborder（枠線）を追加したい場合、box-sizing: border-box;が必須になります。

例えば「横幅100%」で「内側の余白（padding）5%」の箱に、「5pxの枠線（border）」を付けたとします。

何もしないと「100% ＋左右の5% ＋左右の5px」となり、親の箱を完全に突き抜けます。

ここで%とpxといった異なる単位を混ぜて使う時、box-sizing: border-box;を利用します。

box-sizing: border-box;を書くことで、paddingとborderが指定した幅の中に収まります。（※marginは箱の外側の余白で計算には含まれません。）

%（パーセント）のpaddingと、
px（ピクセル）のborderを混ぜても、
はみ出さずに綺麗に収まっています。

HTMLコード表示

<div class="parent-width-100">
  <div class="percent-border-box">
    %（パーセント）のpaddingと、<br>
    px（ピクセル）のborderを混ぜても、<br>
    はみ出さずに綺麗に収まっています。
  </div>
</div>

CSSコード表示

.parent-width-100 {
  width: 100%;
  background-color: #f5f5f5;
}

.percent-border-box {
  /* これが必須 */
  box-sizing: border-box; 
  
  width: 100%;      /* 横幅いっぱい */
  padding: 5%;      /* 画面幅に合わせて余白も伸び縮みする */
  border: 5px solid #e74c3c; /* 枠線は絶対に5pxで固定 */
  
  background-color: white;
}

%指定の実践的な利用例

「上下の%余白も横幅を基準に計算」といった不便な性質を逆手に取った「画像の比率（16:9など）を保ったままレスポンシブ対応させる」というテクニックです。

YouTube動画やサムネイル画像など、「横幅が縮んでも16:9の長方形を維持したい」という場面で使われます。

画面の幅を変えても常に16:9の比率を保ちます。

16 : 9 の美しい長方形！
（padding-top: 56.25% の効果）

HTMLコード表示

<div class="aspect-ratio-box">
  <div class="inner-content">
    16 : 9 の美しい長方形！<br>
    （padding-top: 56.25% の効果）
  </div>
</div>

CSSコード表示

/* 比率を保つための外側の箱 */
.aspect-ratio-box {
  width: 100%;
  padding-top: 56.25%; /* 16:9 の比率を作る数値 */
  
  position: relative; /* 中身を配置する準備 */
  background-color: #2c3e50;
}

/* 文字や画像を入れるための設定 */
.inner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

marginの相殺

CSSは、「上下に隣り合ったmarginは、足し算されずに合体してしまう」といった特殊な仕様があります。

これを「マージンの相殺（打ち消し）」と呼びます。（※左右のmarginでは発生しません。）

marginの相殺について

margin指定が複数並ぶと1つのみ適用
親要素もmarginの打ち消しは発生する
paddingは打ち消しが発生しない

margin指定が複数並ぶと1つのみ適用

上の箱と下の箱、両方marginを指定した場合に隙間はどうなるでしょうか？

例えば、上の箱にmargin-bottom: 30px;（下への余白30px）、下の箱にmargin-top: 50px;（上への余白50px）を指定したとします。

「30px + 50px = 80px」の隙間ができそうですが、実際は「50px」の隙間しかできません。

CSSは上下のmarginがぶつかると「打ち消しが発生し、数値が大きい方が生き残る」といったルールがあるからです。

上の箱
（margin-bottom: 30px;）

下の箱
（margin-top: 50px;）

※隙間は80pxではなく、大きい方の「50px」になります！

HTMLコード表示

<div class="collapse-container">
  <div class="box-top">
    上の箱<br>
    （margin-bottom: 30px;）
  </div>
  
  <div class="box-bottom">
    下の箱<br>
    （margin-top: 50px;）<br>
    <br>
    ※隙間は80pxではなく、大きい方の「50px」になります！
  </div>
</div>

CSSコード表示

.collapse-container {
  background-color: #f5f5f5;
  padding: 1px; /* 親の打ち消しを防ぐため（後述） */
}

/* 上の箱 */
.box-top {
  margin-bottom: 30px; /* 下に30pxの余白 */
  
  background-color: #3498db;
  color: white;
  padding: 20px;
}

/* 下の箱 */
.box-bottom {
  margin-top: 50px; /* 上に50pxの余白 */
  
  background-color: #e74c3c;
  color: white;
  padding: 20px;
}

親要素もmarginの打ち消しは発生する

marginの打ち消しは上下の箱だけでなく、「親と子」の間でも発生します。

「親の箱の『内側』で子の箱を少し下にズラしたい」と考え、子の箱にmargin-topを指定したとします。

すると、子の箱だけが下がるのではなく、子のmarginが親の箱を突き抜け、親の箱ごと下がってしまいます。

親要素に「壁」を作ってmarginが外に漏れるのを防ぐ必要があります。

よく使われる解決策は、親要素に少しのpadding（内側の余白）やborder（枠線）をつけることです。

【失敗例】親に壁がない場合（オレンジ）
子要素のmargin（80px）が外に漏れ出し、親のオレンジの箱ごと押し下げます。
※オレンジの箱の上にグレーの巨大な隙間ができます！

子要素（margin-top: 80px;）
※オレンジの天井にピッタリくっついています

【成功例】親にpadding（壁）を作った場合（緑）
親の「padding-top: 1px;」が壁となり、marginの漏れを防ぎます。
※緑の箱の上に隙間はなく、緑の巨大な隙間ができます！

子要素（margin-top: 80px;）
※緑の箱の内側でしっかり下がっています

分かりづらいですが、黒い箱に指定した「上の余白（margin-top: 80px;）」が、オレンジの箱の天井を突き破って外（上）に漏れ出しました。

オレンジの箱全体が下へ80px押し下げられ、オレンジ色になるはずだった上の空間に下地であるグレーが見えてしまっている状態です。

黒い箱の頭上にオレンジ色の天井はありません。

次に緑のセクションを見てください。

グレーの点線枠のすぐ下から緑の空間が始まり、その下に「黒い箱」、さらに下にも「緑の帯」があります。

こちらは「親の箱に1pxのpaddingの壁」のおかげで、黒い箱の「上の余白（margin-top: 80px;）」が外に漏れ出さずに済みました。

緑の箱は元の位置（一番上）に留まったまま、緑の箱の「内側」で黒い箱がしっかり80px下がり、黒い箱の頭上にはちゃんと緑色の空間（天井）が保たれています。

paddingは打ち消しが発生しない

ここまで「marginの打ち消しルール」を見ましたが、内側の余白であるpaddingは打ち消しルールが一切存在しません。

paddingを指定した場合、値は「足し算」されます。

上の箱にpadding-bottom: 30px;、下の箱にpadding-top: 50px;を指定した場合、中のテキスト同士の距離は「30px + 50px = 80px」になります。

「どうしても想定通りの余白にならない！」とmarginの打ち消しで悩んだ時は、marginではなくpaddingを使って余白を作れないか発想を転換するのもWebデザインにおける有効なテクニックです。

上の箱
（padding-bottom: 30px;）
テキストの下に30pxの余白

テキストの上に50pxの余白
（padding-top: 50px;）
下の箱

※paddingは相殺されないので、テキスト同士の距離は「合計80px」になります！

HTMLコード表示

<div class="padding-container">
  <div class="box-pad-top">
    上の箱<br>
    （padding-bottom: 30px;）<br>
    テキストの下に30pxの余白
  </div>
  
  <div class="box-pad-bottom">
    テキストの上に50pxの余白<br>
    （padding-top: 50px;）<br>
    下の箱
  </div>
  <p class="note">※paddingは相殺されないので、テキスト同士の距離は「合計80px」になります！</p>
</div>

CSSコード表示

.padding-container {
  background-color: #ecf0f1;
  border: 2px solid #bdc3c7;
}

.box-pad-top {
  padding-bottom: 30px; /* 素直に足し算される */
  background-color: #9b59b6;
  color: white;
}

.box-pad-bottom {
  padding-top: 50px; /* 素直に足し算される */
  background-color: #8e44ad;
  color: white;
}

.note {
  font-size: 14px;
  color: #c0392b;
  font-weight: bold;
  padding: 10px;
}

marginにおける要素への左右中央配置

昔から使われる方法と初心者が陥りがちな「勘違い」から見ていきましょう。

marginにおける要素への左右中央配置について

marginを利用して左右中央配置する
margin: auto;で上下左右中央配置はできない
paddingで中央寄せはできない

marginを利用して左右中央配置する

ブロック要素（<div>などの箱）を「左右の真ん中」に配置したい場合、シンプルな方法がmarginを使うテクニックです。

要素に「横幅（width）」を指定した上で、左右のmarginをautoに設定します。

margin: 0 auto;（上下は0、左右は自動計算）と書くのが一般的です。

ブラウザが「親の幅」から「要素の幅」を引き算し、余ったスペースを左右に均等に割り振るため、箱が左右の中央に配置されます。

margin: 0 auto;
左右の中央に配置されます！

HTMLコード表示

<div class="margin-center-parent">
  <div class="margin-center-child">
    margin: 0 auto;<br>
    左右の中央に配置されます！
  </div>
</div>

CSSコード表示

.margin-center-parent {
  background-color: #f5f5f5;
  border: 2px dashed #999;
  padding: 20px 0;
}

.margin-center-child {
  width: 200px; /* 【必須】横幅を指定する */
  margin: 0 auto; /* 左右の余白を自動で均等にする */
  
  background-color: #3498db;
  color: white;
  padding: 15px;
  text-align: center;
  font-weight: bold;
}

margin: auto;で上下左右中央配置はできない

「左右がautoで中央になるなら、上下もautoにすれば上下左右の中央になるのでは？」と誰もが一度は考えます。

しかし、通常のレイアウトでは絶対に機能しません。

CSSの仕様上、通常のブロック要素においてmargin-topとmargin-bottomにautoを指定しても、ブラウザは「0」として計算してしまいます。

Webページは下へと無限に続く性質があるため、親要素に高さがあったとしても「上下の余白を自動計算」という処理が行われません。

親要素（高さ300px）

margin: auto;
※上下の中央にはなりません！

HTMLコード表示

<div class="margin-fail-parent">
  <p class="note">親要素（高さ300px）</p>
  <div class="margin-fail-child">
    margin: auto;<br>
    ※上下の中央にはなりません！
  </div>
</div>

CSSコード表示

.margin-fail-parent {
  height: 300px; /* 親に高さを指定 */
  background-color: #f5f5f5;
  border: 2px dashed #999;
}

.margin-fail-child {
  width: 200px;
  height: 100px;
  /* 上下左右すべてをautoに指定してみるが… */
  margin: auto; 
  
  background-color: #e74c3c;
  color: white;
  padding: 15px;
  text-align: center;
}