余白についての質問です

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

質問なのですが余白の調整を判断するときpadding marginどちらを使うかどうはんだんすればいいのでしょうか？

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

paddingは内側、marginは外側です。

---

https://blog.codecamp.jp/margin_padding
https://saruwakakun.com/html-css/basic/margin-padding

Comments

[hiyokogandam]

使い分けを教えてください。適切にここは内側の余白、ここは外側の余白を開ければいいんだなという判断ができません。
というとても漠然とした質問しかできないくらいよくわかりません
ブロックごとの余白調整や
画像間の調整など本当にわかりません。
この画像を見て内側、外側はわかるのですが、
どのタイミングで内側なのか、外側をあければいいのかについておしえてください。

[ForestSeo]

例えばbackground-colorはpaddingの部分は適用されてmarginの部分は適用されません。また、borderを設定した時にはmarginはborderの外、paddingはborderの中になります。borderやbackground-colorを気にしない場合はどちらでも表示が変わらない場合は多いですが、余白はpaddingじゃないでしょうか？
背景を黒にしたときに、余白をpaddingにすると背景は全部黒になりますがmarginにすると外側だけ白とかになります。文字の位置は変わりません。
画像間の調整はwidth20pxとかのspanとかdivを挟むとかすれば簡単に間に幅を持たせられます。

Answer 2

いま思いつくものを書いてみました。

こういうときはmargin、こういうときはpadding、それ以外はどちらでもいい、というように判断していくのだと思われます。

---

marginのほうがいい場合

• margin: 0 auto;で中央配置にする場合など「auto」を使うとき
  (paddingは「auto」を設定できないため)
• リンクについて、文字だけしか押せないようにしたいとき
• ボタンの外側の余白

など、他の要素と関係しそうな外側の余白

---

paddingのほうがいい場合

• 背景色がある領域の内側の余白
• リンクについて、文字だけでなく、背景色の部分も押せるようにしたいとき
• ボタンの内側の余白
• td、thの余白 (td、thにはmarginが使えないので)

など、要素の中で完結する内側の余白

---

どちらでもいい場合

• 背景色がない領域の内側の余白
• そのほか