【CSS基礎】marginとpaddingの違いとは？width・borderを含めたボックスモデルを使いで解説

「marginとpadding、どっちを使えばいいのか分からない……」
「余白を作ったつもりが、背景色が変なところまで広がってしまった」
「CSSで余白を調整しているうちに、レイアウトがガタガタになってしまった」

CSSを書き始めて、誰もが最初にぶつかる大きな壁。それが「余白」の正体です。

Webデザインにおいて、「余白を制する者はレイアウトを制する」と言っても過言ではありません。この記事では、CSSの最重要概念である「ボックスモデル」を軸に、width・padding・border・marginの4つの要素がどう組み合わさっているのか、どこよりも分かりやすく図解で解説します。

【結論】これが「ボックスモデル」の全貌だ！
width：中身の横幅（コンテンツ領域）
padding：背景色に広がる「内側の余白」
border：要素の境界線を引く「枠線」
margin：隣との距離を保つ「外側の余白」
知っておくと便利な「一括指定（ショートハンド）」
【重要】初心者が必ずハマる「サイズ計算」の罠
まとめ：paddingとmarginの使い分け表

【結論】これが「ボックスモデル」の全貌だ！

CSSにおいて、ブラウザに表示されるすべての要素（見出し、文章、画像、ボタンなど）は、実はすべて「四角い箱（ボックス）」として扱われています。この仕組みを「ボックスモデル」と呼びます。

まずは、以下の全体図を見てください。この構造を頭に入れるだけで、余白の悩みは８割解決します。

width（コンテンツ）：文字や画像そのものが入る「中身」の大きさ
padding（パディング）：中身と枠線の間にある「内側の余白」
border（ボーダー）：要素を囲む「枠線」
margin（マージン）：枠線の外側にある「外側の余白」

この「4層構造」を意識しながら、それぞれの役割を詳しく深掘りしていきましょう。

width：中身の横幅（コンテンツ領域）

すべてのベースとなるのが、箱の「中身」の大きさです。

widthとは？（中身の横幅を決める）
widthは、テキストや画像が表示される「コンテンツ領域」の横幅を指定するプロパティです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sample.css">
    <title>Document</title>
</head>
<body>
    <div class="box-width">
  　　width（コンテンツ）領域です。テキストがギリギリまで詰まっています。
　　</div>
</body>
</html>

.box-width {
  width: 250px;
  background-color: #e0f7fa; /* 薄い水色 */
  border: 1px solid #999; 
}

背景色をつけると、このwidthで指定した範囲まで色が塗られます。この時点では、文字が枠のギリギリまで詰まっていて、非常に窮屈で読みづらいですね。

padding：背景色に広がる「内側の余白」

次に、箱の内側にゆとりを作ります。ここで使うのがpaddingです。

paddingとは？（内側の余白）
paddingは、「コンテンツ」と「枠線（border）」の間のスペースのことです。
・最大の特徴：paddingを増やすと、背景色がついている範囲（要素自体）が一緒に広がります。

<div class="box-padding">
  padding（内側の余白）を追加しました。文字の周りにゆとりができましたね。
</div>

.box-padding {
  width: 250px;
  background-color: #e0f7fa;
  border: 1px solid #999;
  font-size: 14px;
  
  /* paddingを追加 */
  padding: 30px; 
}

図のように、文字の周りにゆとりができました。「箱の内側にクッションを詰めて、中身を保護する」イメージを持つと分かりやすいでしょう。ボタンのサイズを大きくしたい時などは、このpaddingを調整するのが正解です。

border：要素の境界線を引く「枠線」

要素の輪郭をはっきりさせたり、飾りをつけたりするのがborderです。

borderとは？（枠線）
borderは、paddingのすぐ外側に引かれる線です、太さ、種類、色を指定できます。

<div class="box-border">
　border（枠線）を追加しました。要素の境界線が表示されました。
</div>

.box-border {
  width: 250px;
  background-color: #e0f7fa;
  padding: 30px;
  border: 4px solid #006064; /* 4pxの太さ・一本線・濃い色 */
}

管理人

ここでは、自分の目で確かめてみよう！

このborderを境目にして、「内側の余白（padding）」と「外側の余白（margin）」が切り替わります。

margin：隣との距離を保つ「外側の余白」

最後が、最も間違いやすいmarginです。

marginとは？（外側の余白）
marginは、「枠線（border）」の外側にあるスペースです。自分自身と、隣り合う他の要素（上下にある文章や、左右に並ぶ画像など）との「距離」を保つために使います。
・重要ポイント：marginの部分には背景色は広がりません。ここは完全に「透明な隙間」です。

<div class="margin-example-container">
　<div class="box-a">
　　ボックスA（marginあり）
　</div>
　<div class="box-b">
　　ボックスB（隣の要素）
　</div>
</div>

/* ボックスA：marginを設定して、隣との距離を作る */
.box-a {
  width: 250px;
  background-color: #e0f7fa; /* 水色 */
  padding: 20px;
  border: 2px solid #006064;
  
  /* marginを設定：下の要素（ボックスB）との間に40pxの隙間を作る */
  margin-bottom: 40px; 
}

/* ボックスB：比較用の隣接要素 */
.box-b {
  width: 250px;
  background-color: #f5f5f5; /* 薄いグレー */
  padding: 20px;
  border: 2px solid #999;
}

管理人

marginの結果も自分自身で確認してみよう！
どこがmarginか分からなかったら、デベロッパーツールを活用して見てみよう。

「paddingは自分の体格（厚み）を大きくするもの」「marginは他者とのソーシャルディスタンスを保つもの」と考えると、使い分けに迷わなくなります。

知っておくと便利な「一括指定（ショートハンド）」

これまでは「四方すべて」に余白をつけていきましたが、上下左右バラバラに指定することも可能です。

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

これらを一行で書く方法をショートハンドと呼び、現場ではこちらがよく使われます。

/* 上下左右をバラバラに指定（時計回りと覚える） */
/* 上 右 下 左 の順 */
margin: 10px 20px 30px 40px;

/* 上下 と 左右 で指定 */
margin: 10px 20px;

【重要】初心者が必ずハマる「サイズ計算」の罠

ここで、多くの初心者が「CSSが壊れた！」と焦るポイントを解説します。

例えば、width：300pxの箱にpadding：20pxを追加すると、ブラウザ上での実際の横幅は340px（300 + 左20 + 右20）になってしまいます。これが原因で、横に並べていた要素が入り切らずに下に落ちてしまう……という失敗が多発します。

解決策：box-sizing: border-box;
CSSの冒頭（または全ての要素）に以下の設定を加えるのが、現在の制作の「鉄則」です。

* {
  box-sizing: border-box;
}

これを入れると、「widthの中にpaddingやborderも含める」という計算ルールに変わるため、サイズ調整が劇的に楽になります。

まとめ：paddingとmarginの使い分け表

最後に、今回学んだことをシンプルに整理しましょう。

項目	役割	背景色	主な用途
width	コンテンツの幅	つく	中身の大きさを決める
padding	内側の余白	つく	文字と枠の間に隙間をつくる・ボタンを大きくする
border	枠線	線が乗る	要素を囲む、目立たせる
margin	外側の余白	つかない	要素同士がくっつかないように離す