【初心者向け】paddingとmarginの違いと使い分けを分かりやすく解説！

こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！

paddingとmarginの違いと使い分けについて解説していきます。

CSSで余白を設定する際に、「padding」と、「margin」で迷ったことはないでしょうか？

どちらでも問題ないんじゃないの？…
そもそも、2つの違いがはっきりとは分からない…
指定方法が分からない…

上記のように、疑問に思っていることを解決できる記事となっています。

僕は、フロントエンドエンジニア・マークアップエンジニアとして、主にWebサイトを作成しています。

HTMLで書いた要素に対して、CSSで余白の設定をするプロパティには、「padding」と、「margin」2つのプロパティがあります。

この2つには大きな違いがあり、ここでは「ボックスモデル」という概念と合わせてご説明します。

※CSSについては、こちらの記事「【初心者向け】CSSとは？CSSってどう書くの？」を読んでみてください。

1 paddingとmarginについて
2 paddingとmarginの使い方
- paddingの使い方
- marginの使い方
3 まとめ

1 paddingとmarginについて

paddingと、marginについて何となくで使用している方や、使い分けが理解できていない方が多いのではないでしょうか？

いざ使ってみると上手くいかないなんてこともあるかと思います…

まずは、この2つのプロパティについて、ご説明していきます。

paddingとは？

paddingとは、CSSのプロパティで、要素の内側の余白を意味します。

ボーダー線で指定された境界とその中のコンテンツの間の余白を設定するためのプロパティです。

※参考記事：「paddingとは？：カスケーディングスタイルシート」

marginとは？

marginは、paddingの内側の余白に対して、要素の外側の余白を意味します。

borderで指定された境界とその外側のコンテンツの余白を設定するためのプロパティです。

この2つのプロパティに関して、文章だけでは分かりにくいので、ボックスモデルという図を使ってご説明していきます。

※参考記事：「marginとは？：カスケーディングスタイルシート」

ボックスモデルとは？

ボックスモデルとは、HTMLで余白やレイアウトの設定をするには、CSSの「ボックスモデル」という考え方を知っておく必要があります。

HTML要素の大体は四角いボックス型の要素でできており、「内容領域（content）」、「パディング領域（padding）」、「ボーダー領域（border）」、「マージン領域（margin）」の4つの領域で生成されています。

●内容領域（content）：ブラウザーに表示される要素内の文字テキストや画像などの領域です。

●パディング領域（padding）：内容領域の外側にある余白を指します。

●ボーダー領域（border）：パディング領域の外側に表示される「ボーダー線」の領域を指します。

●マージン領域（margin）：要素の外側にある余白を指します。隣り合った要素同士の間隔を広げるためなどに使用されます。

2 paddingとmarginの使い方

ここまで簡単にですが、paddingとmarginの違いを理解できたかと思います。

ここからは、実際にこの2つの使い方を解説していきます！

この2つの使い方に関して、下記のHTMLとCSSを前提とし、余白部分に当たる要素の背景色をわかりやすいように変えてご説明します。

<div class="test">
  <span>テスト</span>
</div>

.test {
  background-color: gray;
  border: 3px solid black;
}

paddingの使い方

下記のCSSを指定すると図のように表示され、どこの部分に余白ができたのか分かるかと思います。

paddingを20px分余白を追記しています。

今回は、div要素（test）自体を黒いボーダー線で囲い、グレーの背景色を指定しています。

paddingを指定すると下記の図のように変化します。

ボーダー線の内側に余白ができるイメージです。

.test {
  background-color: gray;
  border: 3px solid black;
  padding: 20px;
}

marginの使い方

paddingを指定すると下記の図のように変化します。

marginの場合はボーダー線の外側に余白ができるため、黄色い部分に20px分の余白ができます。

※余白に色の指定をしていないですが、分かりやすくわざと黄色で色を指定しています。

.test {
  background-color: gray;
  border: 3px solid black;
  margin: 20px;
}

paddingとmargin共に、要素の上部分のみや、右部分のみに指定したい場合があります。

その場合は、「padding-top」や、「margin-right」など、部分的に指定も可能となっております。

また、「padding: 10px 20px 30px 40px;」のように、10pxは要素の上部分、20pxは要素の右部分、30pxは要素の下部分、40pxは要素の左部分で一括で指定も可能です。（一括の場合は、要素を時計回りに指定するルールがあります。）

3 まとめ

コーディングの初めは理解するのに時間がかかるかと思いますが、じっくりと時間かけてこの2つの違いを理解することによって、綺麗なコーディングができると思います。

自分が思った通りに余白を作れるようにしましょう！余白こそデザインです！

この記事を参考に、paddingとmarginの使い分けに迷わず、効率化できると嬉しいです！