はじめに

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の場合、紫の斜め線で閲覧できる。

参考記事