はじめに
block 要素に margin と padding をそれぞれつけてみるとどうなるか。
See the Pen Untitled by KadoBloG (@KadoProG) on CodePen.
見ての通り、両者とも左側に同じ余白が挿入されており、この時点では特に違いがない。
そんなとき、あなたは迷ったらどちらを使うだろうか？
marginは外側、paddingは内側に余白が発生
まず結論を言うと、要素に対してmarginは外側、paddingは内側に余白が発生する。
直訳すると、marginは、余白,欄外,余地という意味合いがあり、一般的な余白の使い方に近い。一方、paddingは、詰め物,芯という意味合いがあり、コンテンツの中に埋め物をするイメージである。
外側、内側による余白の仕様の違い
では、外側、内側という違いにより具体的に何が違うのかを解説する。
CSSスタイルの範囲
- 背景
- ボタンやアンカーリンクのクリック範囲
- borderの囲い
- 要素サイズ(width, height)に含まれるか
- box-sizingにより変化
marginは上記に上げた項目には一切関わらない。逆に、paddingはこれらの影響を受け、背景・ボタンの範囲を制御できる。
| margin | padding(デフォルト) |
|---|---|
 |
 |
Qiitaのボタンは良い例で、現状仮にこれをmarginでやった場合と比較するとこうなる。
marginで実施すると、背景及びクリック範囲がかなり縮小しているのがわかる。ただし余白自体はかかっているため、表示位置は両者一緒。
隣同士の余白の取り扱い
次に、隣同士の余白の取り扱いの違いだ。試しに、左の要素には右に余白30px, 右の要素には左に余白10pxを与えてくっつけると仮定する。
実際に flex等でくっつけると、marginでは10px分が重なって30pxの余白となっている。逆にpaddingは単純に加算され余白は40pxとなる。
marginは指定した最低限の距離を開ける
marginの概念について、人で例えると分かりやすい。10cmと2m(200cm)の社会的距離を担保したい人（HTML要素）がある場合、200cmが優先され、10cmは実質無視される。それがmarginである。
ただし例外もあり、marginはマイナスの値が可能で、-2m, 2mであれば実質0mとなり、更にマイナスの値を大きくすると、要素が重なる。
See the Pen padding-first-code-2 by KadoBloG (@KadoProG) on CodePen.
通常のWebアプリで使用されることはほぼないが、LPデザインで特殊な実装をする場合使うことがある。
paddingは優等生
一方paddingは、繰り返しになるが内側に余白が発生するため、外的要因を受けない。マイナスの値も適用できない。
See the Pen padding-first-code-5 by KadoBloG (@KadoProG) on CodePen.
paddingは背景を適用されるため、シンプルなボタンの装飾に非常に便利だ。また、コンテナ側にもpaddingを適用している。
コンテナ側にpaddingを付与すると、子要素側にmargin等を付ける必要がないため、再利用性が非常に高く、実装が容易になる。
また、display: flex、justify-content: space-between を付与すれば、横並び、かつ横の余白を自動調整してくれる。
結局どちらを使用すべきか
極論言ってしまうと、余白はpaddingだけで実装が可能であるし、逆にmarginだけでも実装が可能である。
しかし、実際にコードを見ると、実装のしやすさでpaddingが使いやすいと言える。
paddingは潔い
See the Pen padding-first-code-7 by KadoBloG (@KadoProG) on CodePen.
もし仮に全てmarginでやる場合、buttonの中にspan要素を付与し、そこにmarginを付与すれば、同じボタンを実装できる。
ちなみにpaddingの場合はbuttonにpadding: 20pxだけで完了する。潔い。
全体のレイアウト調整はmarginを使ってはいけない
| marginのみ |  |
|---|---|
| paddingとflex |  |
横並びで、間に余白があるレイアウトを実装する場合、marginで実装するのは現実的じゃない。
See the Pen padding-first-code-8 by KadoBloG (@KadoProG) on CodePen.
固定サイズではmargin, paddingとも同じレイアウトを維持している。
しかし、Webサイトは異なる横幅に対応させる必要があるため、marginを使用した場合、これ以外のサイズで表示が崩れる（チェックボックス押してプレビュー）。
ブラウザ・コンテナの横幅だけでなく、中の要素も1pxでも変更されれば、再びmarginの変更が必要である。
対してpadding＆flexの方は、全く崩れることはない。上下はpaddingで実装し、横の隙間はflex, justfy-content: space-betweenで実装可能だ。何より、コード量がpaddingのほうが少ない。
flexの並び方は複数あるので、色々調べてみるのがオススメ！
もし先程のmarginと同様に一定間隔を開けたい場合は、gapを使用すると最低限の距離を開けつつ、コンテナ要素が自動的にサイジングされる！
シンプルな実装はmarginでもOK
WordPressで構成されたブログは、段落でmargin-bottomが使用されている。marginは、上下左右のみの付与も可能で、下部のみであれば、前述したmargin重なり問題が発生しないため、直感的に実装できる。
marginで中央寄せ可能
margin: 0 auto;(最初の0は上下の余白)のように指定をすることで、中央寄せが可能である。
ただし、その要素がblock要素で、親要素より小さいサイズを指定する必要がある。簡単なようで実は難しい。
また、単にテキストを中央寄せしたい場合はtext-align: centerを使用する方法もあるし、横並びで複数表示するときはflexを使用する方法もある。
marginは細かい実装には不向き
ブログのように比較的統一されているレイアウトの場合、上記の実装で十分である。しかし、Webアプリなど、複雑な実装を必要とする場合、場所によってmarginが異なる。
| 通常 | 入れ替え |
|---|---|
 |
 |
例えば、「送信しますか？」のスタイルには、margin-top: 20px; margin-bottom: 0を指定している。
しかし、中のレイアウトが入れ替わると、それだけでコンテナ内のCSSは全て書き換える必要がある。
可能な限りpadding, flex-boxを使用しよう
簡単な実装でない限りは、padding, flex-boxを使用することが無難となる。とはいえ実際のサイトがどうなっているかは、実際に見てみるのがオススメ。
Chromeであれば Ctrl/Cmd + Shift + C で、要素の選択ができる画面となる。そこで、実際のHTMLがどのように余白表示されているか検証してみると良い。
某X やChatGPTは、ほぼpadding及びflexで構成されている。
要素は青、marginはオレンジ、paddingは緑で閲覧できる。flex-boxの場合、紫の斜め線で閲覧できる。
参考記事