【6日でできるHTML入門】CSSによる余白の指定

　Webページのレイアウト設計において、「余白」は要素同士の距離を調整し、読みやすさや視覚的なバランスを保つための重要要素です。CSSでは、要素の内側に余白を設ける padding と、外側に余白を設ける margin の２種類のプロパティが用意されており、それぞれに単一・個別・ショートハンド指定など多彩な指定方法があります。
　「CSSによる余白の指定」では、まず内部余白と外部余白の基本を押さえ、つづいて上下左右個別指定、複数値・相殺規則、センタリングへの応用、そしてボックスモデル全体での余白の位置づけまでを、具体的なHTMLサンプルと図表を交えて詳しく解説します。

１．内部余白（padding）の指定

1.1. `padding` ショートハンド指定

　padding プロパティは、上下左右の内部余白をまとめて指定できます。値を半角スペース区切りで1～4つ指定します。

指定数	解釈
1つ	上下左右すべて同じ
2つ	上下／左右
3つ	上／左右／下
4つ	上／右／下／左

ファイル名： lesson15-1.html

<!-- ファイル名: lesson15-1.html 🧩 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>内部余白の基本🧩</title>
  <style>
    .box {
      background-color: #FFF3E0;
      border: solid 2px #FF8F00;
      margin: 24px auto;
      width: 300px;
      padding: 20px 10px; /* 上下20px・左右10px */
    }
  </style>
</head>
<body>
  <div class="box">
    padding: 20px 10px; を指定した例です。上下に20px、左右に10pxの余白が入ります。
  </div>
</body>
</html>

ブラウザの出力例

オレンジ枠の内側に上下広め・左右狭めの余白が付き、テキストが読みやすくなります。

1.2. `padding-top`/`-right`/`-bottom`/`-left` の個別指定

個別に余白を調整したい場合は、4つのプロパティで指定できます。

ファイル名： lesson15-2.html

<!-- ファイル名: lesson15-2.html 📐 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>内部余白の個別指定📐</title>
  <style>
    .card {
      background-color: #E8F5E9;
      border: solid 2px #388E3C;
      width: 280px;
      margin: 24px auto;
      padding-top:    30px;
      padding-right:  10px;
      padding-bottom: 5px;
      padding-left:   20px;
    }
  </style>
</head>
<body>
  <div class="card">
    上30px<br>
    右10px<br>
    下5px<br>
    左20px の padding を指定
  </div>
</body>
</html>

ブラウザの出力例

各辺ごとに異なる内部余白が設定され、テキストの位置が調整されます。

２．外部余白（margin）の指定

2.1. `margin` ショートハンド指定

margin も padding と同様に1～4つの値で上下左右の外部余白を一括指定できます。

ファイル名： lesson15-3.html

<!-- ファイル名: lesson15-3.html 🎯 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外部余白の基本🎯</title>
  <style>
    .alert {
      background-color: #FFEBEE;
      border: solid 1px #D32F2F;
      width: 260px;
      padding: 12px;
      margin: 10px 0;   /* 上下10px・左右0 */
    }
  </style>
</head>
<body>
  <div class="alert">
    margin: 10px 0; を指定<br>
    上下10pxの余白が入り、左右はぴったり寄せられます。
  </div>
</body>
</html>

ブラウザの出力例

上下に10pxずつのスペースが確保され、要素間の隙間を調整できます。

2.2. 個別指定・相殺・センタリング

プロパティ	説明
`margin-top`	上の余白
`margin-right`	右の余白
`margin-bottom`	下の余白
`margin-left`	左の余白

マージンの相殺
垂直方向で隣接する要素同士は、大きい方の余白だけが適用されます。
センタリング
margin: 20px auto; のように左右を auto にすると、幅を指定した要素が水平中央に配置されます。

ファイル名： lesson15-4.html

<!-- ファイル名: lesson15-4.html ⚖️ -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>マージン相殺とセンタリング⚖️</title>
  <style>
    .box1 {
      background-color: #E3F2FD;
      width: 200px;
      margin: 30px 0; /* 上下30px */
      padding: 8px;
    }
    .box2 {
      background-color: #C5CAE9;
      width: 200px;
      margin: 10px 0; /* 上下10px（相殺後は30px） */
      padding: 8px;
    }
    .centered {
      background-color: #FFF9C4;
      width: 180px;
      margin: 20px auto; /* 上下20px・左右auto */
      padding: 8px;
    }
  </style>
</head>
<body>
  <div class="box1">上余白30px</div>
  <div class="box2">上余白10px（相殺後は30px）</div>
  <div class="centered">幅180pxの要素が中央配置</div>
</body>
</html>

ブラウザの出力例

box1 と box2 の間隔は 30px。（相殺規則）
centered は左右中央に配置されます。

３．ボックスモデルでの余白の位置づけ

3.1. `width`/`height` と余白・枠線の関係

プロパティ	算出サイズ
`width`	コンテンツ幅
`height`	コンテンツ高さ
+ `padding`	内部余白（左右の合計）
+ `border`	枠線の太さ（左右の合計）
= 実際の外寸	要素が占有する横幅

同様に縦方向も height + padding-top/bottom + border-top/bottom を足し合わせたサイズが要素の実寸となります。

3.2. ボックスモデルの図解

以下の模式図は、width・padding・border・margin の関係を表したものです。

┌──────────────────────────────────────┐  
│ 外部余白（margin-left）                                                    │  
│  ┌──────────────────────────────────┐  │  
│  │ 枠線（border-left）                                                │  │  
│  │  ┌──────────────────────────────┐  │  │  
│  │  │ 内部余白（padding-left）                                   │  │  │  
│  │  │  ┌──────────────────────────┐  │  │  │  
│  │  │  │ コンテンツ幅（width）                              │  │  │  │  
│  │  │  └──────────────────────────┘  │  │  │  
│  │  │                                   内部余白（padding-right）│  │  │  
│  │  └──────────────────────────────┘  │  │  
│  │                                               枠線（border-right） │  │  
│  └──────────────────────────────────┘  │  
│                                                    外部余白（margin-right）│  
└──────────────────────────────────────┘

content width = width（この例では400px）
padding = padding-left＋padding-right（左右それぞれ20px → 合計40px）
border = border-left＋border-right（太さ10pxの枠線が左右に → 合計20px）
margin は外側なので、ここでは計算に含めません

実際の表示サイズの計算例

指定した width：400px
左右の内部余白 padding：20px + 20px = 40px
左右の枠線 border：10px + 10px = 20px

実寸横幅 = 400 + 40 + 20 = 460px

同様に、縦方向も

実寸高さ = height + (padding-top + padding-bottom) + (border-top + border-bottom)

となります。

ポイント

CSSの width／height は「コンテンツ領域のサイズ」を指定し、そこに padding や border は含まれません。
レイアウト設計時には「指定したサイズ＋ padding ＋ border」を合計して、要素が占有する実際のスペースを計算しましょう。

これを理解しておくことで、ズレのない正確なデザインが可能になります。

タグ＆プロパティまとめ

種類	記述例	説明
padding	padding:20px 10px;	内部余白を一括指定
padding-top 等	padding-left:15px;	各辺の内部余白を個別指定
margin	margin:10px auto;	外部余白＋センタリング
margin-bottom等	margin-top:30px;	各辺の外部余白を個別指定
width	width:300px;	コンテンツ幅を固定
height	height:200px;	コンテンツ高さを固定
border	border:solid 2px #000;	枠線をショートハンドで指定

　これらを使い分け、各要素の内外に最適なスペースを確保することで、読みやすく整ったレイアウトが実現できます。

【6日でできるHTML入門】CSSによる余白の指定