【保存版】marginとpadding、どう使い分ける？

## この投稿で分かること
* margin/paddingとは
* ボックスモデルについて
* marginとpaddingの使い分けについて
* margin/padding以外で余白を作る方法

## margin/paddingとは
marginとpaddingはどちらも**要素の余白を作るため**のプロパティです。
この2つの違いは「要素の**外側**（margin）」と「要素の**内側**（padding）」どちらに余白をつけるかになります。この外側・内側の意味については図を見ると分かりやすいでしょう。

![スクリーンショット 2025-05-15 12.28.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/eca4bf32-5369-41f8-8e06-f59116f85ef3.png)
こちらは、GoogleChromeのデベロッパーツールに表示されているボックスモデルです。

要素って？外側とかってどういう意味？これらを理解するために大切なのが、この**ボックスモデル**という考え方です。

### ボックスモデルという考え方
:::note info
**ボックスモデル**
HTMLにおける全ての要素は、四角い箱の中に収められているという考え方
:::
どういうことかというと、
```
<h2>エンジニア見習い</h2>
<p>Qiita更新中</p>
```
これがページに表示されるとこんな感じで表示されます。
![スクリーンショット 2025-05-15 12.40.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/b0525882-be8b-400d-837d-9cc2bb4d10d4.png)
このように<font color="red">**四角い箱のなかに要素（h2やp）が入り、積み重なってできている**</font>のがWEBページです。

![Image_fx (4).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/e899fae3-19c4-4e68-b8d9-d8d149d32f92.jpeg)




この四角には余白や線をつけることができ、それを指定できるのが「margin」「padding」「border」の3つです。

ボックスモデルの図を見ると、marginとpaddingの間にはborderが存在しています。
borderを指定しているpにそれぞれmarginとpaddingを指定して見ていきましょう。

### marginを指定すると・・・
```
p {
    border: 2px solid #333333;
    margin: 30px;
}
```
![スクリーンショット 2025-05-15 12.56.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/8e4cba56-94f3-4ffe-9cde-44a2d4e39a2b.png)
線の外側に余白がつきました。

:::note info
**margin**
borderの外側に余白をつけるプロパティ
→**他の要素と距離をとる、レイアウトを整える**用途で使われる
:::

### paddingを指定すると・・・
```
p {
    border: 2px solid #333333;
    padding: 30px;
}
```
![スクリーンショット 2025-05-15 13.01.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/6cfc9095-6539-4393-b815-862f1a8d8532.png)
線の内側に余白がつきました。

:::note info
**padding**
borderの内側に余白をつけるプロパティ
→**中身を守る、読みやすくする、クリックしやすくする**用途で使われる
:::

##  余白を指定する要素ごとで動きが異なる？
余白の指定する要素が**ブロック要素**なのか**インライン要素**なのかがポイントになります。

### ブロック要素に余白を指定する
:::note info
**ブロック要素**
```<div>```, ```<p>```, ```<h1>```など
幅いっぱいに広がる、上下に余白を持てるという特徴がある
:::

ブロック要素に対してはpaddingもmarginも、**上下左右正常に機能**します。
```
p {
    padding: 30px;
    background-color: antiquewhite;
    width: 60%;
    margin: 30px auto;
}
```
![スクリーンショット 2025-05-15 18.50.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/8faa8344-3ab6-4c9a-9157-fec795677881.png)
※オレンジがmargin、グリーンがpadding、ブルーが要素

しかし、下のp要素にも上下margin30pxを指定しているのに、上の余白が消えてしまっていますよね。
これを**marginの相殺**といいます。
上下のmarginに対しては、この相殺に気を付ける必要があります。
上下のmarginが重なったとき、大きい方の数値がmarginとして反映されます。

### インライン要素に余白を指定する

:::note info
**インライン要素**
```<span>```, ```<a>```, ```<strong>```など
テキストの中に入り込む、行の中に収まるという特徴がある
:::
一方でインライン要素に関しては2つの特徴があります。
+ paddingは上下左右すべて効く（ただし**上下は行の高さに影響**）
+ marginは**左右だけ**効く（上下のmarginは効かない or 無視される）

```
a {
    padding: 30px;
    border: 2px solid blue;
    width: 60%;
    color: blue;
    margin: 30px 20px;
}
```
![スクリーンショット 2025-05-19 11.02.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/76e59dd0-f761-452e-a94b-bddef78cd45d.png)

このようにpaddingは上下左右についていますが、marginは上下にも指定しているにも関わらず左右にしかつきません。
もし、インライン要素に対してmarginの上下をつけたいときは
```display:inline-block;```を指定する必要があります。

## こんな時はmarginとpaddingどっちを使う？
<font color=red>**大前提**</font>
+ 要素と要素の間（外）→ **margin**
+ 要素の中の空間→ **padding**

この考えを持って以下の場合はどっちを使うことが多いのか、考えていきます。

![Image_fx (5).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/37599f54-3c01-4b35-880f-08e48a3cf7cf.jpeg)

### Q. セクションとセクションの間隔
A. **margin**をよく使う
→要素同士の上下距離なので

### Q. ボックス内の文字を読みやすくする
A. **padding**をよく使う
→枠の中のテキストにはpaddingを使う

### Q.ナビゲーションボタンを押しやすくする
A. **padding**を使う
→クリック範囲を広げるのはpadding

### Q.ボックス同士の横並びスペース調整
A. **margin**を使う
→カードなどの横間隔はmarginで調整

### Q.テキストインデント風の装飾
A. **padding**を使う
→文字を右に下げるときは要素の内側に余白を入れてあげる

### Q.レイアウトの位置調整
A. **margin**を使う
→```margin: 0 auto;```等で中央寄せなど、位置調整にはmargin

## ぶっちゃけmargin・paddingは古い？
という見出しをつけていますが、古いことはありません。
ただ、レスポンシブデザインを考える上でflexboxやGridが使いやすい場面が多く、それらで余白を指定して作っているWEBサイトがよく見られます。
大きな要素の配置はFlexbox等で指定、より細かく位置調整したり、ボタンなどの要素の内側を広げたりするのにmarginやpaddigを使用していくのが、可読性が高いhtml・CSSを作成できそうです。


調べていったら、FlexboxやGridで「gap」を使って余白を指定すれば、デザインが不規則なレイアウト等でない限り、レスポンシブデザインを考えるとこちらの方が使い勝手が良さそうです :eyes: 
これの使い方も勉強していきたい・・・

https://ics.media/entry/210628/#gap%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%83%BC%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9

## まとめ
某学習教材の広告で、「ここ、本で読んだやつだ！」っていうひらめき:bulb: の描写があるように、これってこういう違いがあるんだ、こんな時使うんだっていう知識のストックがあるといいですよね。
少しでも同じ初心者の方たちの参考になると嬉しいです！（間違っている箇所があればぜひ教えてください:bow: ）

## 参考URL

https://zero-plus.io/media/margin-padding-difference/

https://tomiwa-tech.co.jp/blog/margin-and-padding/