【完全保存版】CSSのmarginとpaddingの違いと使い方｜余白調整を初心者向けに徹底解説

CSSを学び始めた多くの方が、必ず混乱するのが
「margin と padding の違い」です。

余白が思った通りにつかない
どちらを使えばいいのか分からない
レイアウトが崩れる

この記事では、「css margin padding」で検索した初心者の方に向けて、
marginとpaddingの基本的な考え方から、
実務での正しい使い分けまでを 丁寧に解説 します。

marginとpaddingとは何か

marginとpaddingは、どちらも 余白を調整するCSSプロパティ です。
ただし、役割はまったく異なります。

margin：要素の 外側の余白
padding：要素の 内側の余白

この違いを理解することが、CSSレイアウト上達の第一歩です。

marginとは（外側の余白）

marginは、
要素と要素の間のスペース を作るためのプロパティです。

.box {
  margin: 20px;
}

marginの特徴

要素の外側に余白ができる
他の要素との距離を調整する
レイアウト全体の間隔調整に使う

paddingとは（内側の余白）

paddingは、
要素の中身と枠線の間の余白 を作るプロパティです。

.box {
  padding: 20px;
}

paddingの特徴

要素の内側に余白ができる
文字や画像が見やすくなる
ボタンやカードデザインによく使う

marginとpaddingの違いを図で理解する

イメージとしては、次のように考えると分かりやすいです。

margin：箱と箱の間のスキマ
padding：箱の中のスキマ

外か内か が最大の違いです。

marginとpaddingの基本的な指定方法

全方向に指定する

.box {
  margin: 20px;
  padding: 16px;
}

上下左右を個別に指定する

.box {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

省略記法（よく使われる）

.box {
  margin: 10px 20px;
}

これは以下と同じ意味です。

上下：10px
左右：20px

marginのよくある使い方

要素同士の間隔を空ける

section {
  margin-bottom: 60px;
}

記事やセクションの区切りに使われます。

横方向の中央寄せ

.box {
  width: 300px;
  margin: 0 auto;
}

marginを使った定番テクニックです。

paddingのよくある使い方

ボックス内の余白調整

.card {
  padding: 20px;
}

文字が枠線にくっつかず、読みやすくなります。

ボタンデザイン

.button {
  padding: 10px 20px;
}

paddingがあることで、クリックしやすいボタンになります。

marginとpaddingの使い分けルール

迷ったときは、次の基準で考えましょう。

目的	使うプロパティ
要素同士の距離	margin
要素の中の余白	padding
レイアウト調整	margin
見た目・読みやすさ	padding

レイアウトはmargin、デザインはpadding
と覚えると分かりやすいです。

marginとpaddingでよくあるミス

paddingで要素間の距離を調整してしまう

.box {
  padding-bottom: 40px;
}

要素同士の間隔には、
paddingではなくmarginを使いましょう。

marginの重なり（マージンの相殺）

p {
  margin-top: 20px;
  margin-bottom: 20px;
}

上下のmarginは、
大きい方だけが適用される 場合があります。

これを「マージンの相殺」と呼びます。

box-sizingとpaddingの関係

paddingを指定すると、
要素のサイズが大きくなることがあります。

.box {
  width: 300px;
  padding: 20px;
}

この問題を防ぐには、box-sizing を使います。

.box {
  box-sizing: border-box;
}

実務では、以下を全体に指定することが多いです。

* {
  box-sizing: border-box;
}

よくある質問

marginとpaddingはどちらを多く使いますか

どちらも頻繁に使いますが、
レイアウト調整はmargin、見た目調整はpadding が基本です。

marginだけでデザインしてもいいですか

おすすめしません。
paddingを使うことで、読みやすくクリックしやすいUIになります。

まとめ

CSSのmarginとpaddingは、余白調整に欠かせない重要なプロパティです。

margin：外側の余白
padding：内側の余白
レイアウトはmargin
デザインはpadding

「css margin padding」で検索した方は、
まず 外側か内側かを意識して使い分ける ことから始めてみてください。
この2つを正しく理解できると、CSSレイアウトの理解が一気に深まります。

【完全保存版】CSSのmarginとpaddingの違いと使い方｜余白調整を初心者向けに徹底解説