どうしてこんな議題を？
HTMLをコーディングしている最中に要素同士の間の距離を設定するときにはmarginやpaddingを設定します
marginとpaddingの設定では ある程度同じような効果が得られるので どちらを使うべきか迷う方もいらっしゃるのではないでしょうか？
プロジェクト内での指針を決めたり 技術指導をする際に 「結局どっちを使ったらいいですか？」 という質問に返答できるように 本記事で回答します
結論
要素同士の間の距離は 基本的にmarginで設定してください
理由
完璧な設計書を元にコーディングができることは ほぼないからです
Webサイトを作成するにあたって 画面設計書・ワイヤーフレーム・既存サイトなどを基にコーディングをはじめますが 9割以上の確率で仕様の未定義や変更に直面します
フロントエンドの実装は柔軟に対応できるように進める必要があります
marginとpaddingのおさらい
-
padding
親要素が基準となり 子要素のサイズが小さくなるなどの影響を受ける場合があります -
margin
子要素が基準となり 親要素のサイズが大きくなるなどの影響を受ける場合があります
そもそも
Webページの最優先事項は 情報(文字や画像など)を 利用者にわかりやすく提供することです
故に
子要素のサイズは文字や画像サイズを基に設定しているはずなので
親要素か子要素のサイズを変更しないといけない場合は 親要素を変更させるべきなのです
とはいえ
paddingには複数の子要素との間の距離を一度に設定できるというメリットがあります
終わりに
状況によって最適な答えは違うと思いますので 特に制約がないときの指標にしてください