結論：いらないけど使いたい時がある。
#marginいらなくない？
margin は CSS で要素同士の余白を付ける場合の最も一般的な方法であり、古来から使われてきました。
しかし、現代では IE の消滅によって完全に人権を得た flexbox があり、flexbox では gap を指定して子要素同士の余白を作ることができます。gap では端の要素に任意の余白をつけることは難しいというか適していませんが、それをしたければ padding があります。
よって、margin を使用しなくても思い通りに余白をつけることは可能です。
#marginじゃなくてpaddingを使う理由
前の項目を読んで「ちょっと待ってくれ、それなら padding 不要論でも同じことじゃないか」と思った方もいるでしょう。それは正しいです。理論上は padding を使用せず margin を使用しても同じことができるはずです。でも、margin ではなく padding を使うことで嬉しい理由がいくつかあります。
margin と padding の違いについて考えてみましょう。
margin は要素の外側に対して、padding は要素の内側に対して余白を取ります。margin を使いたい理由、つまり外側に余白を付けたい状況は何でしょうか。
##理由1: flexboxの仕事
まず思い浮かぶのは並んだ子要素同士の間で余白を開けたい場合ですよね。
しかしそれは flexbox が最も得意としていることです。
flexbox が使えるのならば、margin を使う理由はありません。
##理由2: 親要素との余白
子要素同士ではなく、子と親の間での余白はどうでしょうか。
flexbox は flex-start や flex-end などの左右に寄せるための仕組みはありますが、何 px や何 rem といったように親との間に指定した量の余白をつけることは難しいです。では margin の出番でしょうか。
いいえ、padding の出番です。
他の方のブログで書いてあったのか、そもそもそういう有名な理論があるのかはわかりませんが、「子は親のスタイルを知るべきではない」みたいな言葉をどこかで見た記憶があります。[1]
これは現代のコンポーネントベースなフロントエンドを念頭に置いた理論だと推察されますが、その通りですよね。親要素のスタイルを前提に子要素のスタイルを作ってしまうと、特定の親のもとでしか生きられないコンポーネントが誕生してしまいます。
話が少し逸れましたが、親要素との余白を margin で取るということは、まさに子が親に干渉してしまっているのです。
上の理論で言えば子と親の余白は親の責任です。padding を使いましょう。
##理由3: マージンの相殺
マージンの相殺という CSS の仕様をご存知でしょうか。
すべて説明すると長くなってしまうので、簡単に言うと「垂直方向に並んだ要素同士の margin のうち、大きいほうが残る」仕様です。実際にはもう少し複雑なので詳しく知りたければググってください。
仕様自体は理解していればそこまで難しいものではないのですが、padding にはないものなので margin のほうが複雑と言えます。
マージンの相殺について以前 FireFox と Chrome の挙動の違うバグがあったという記憶がありますが、確証はありません。
#それでもmarginを使いたいとき
前の項目で説明したように、多くのケースで flexbox や padding のほうが適しています。実際にこのブログでも基本的に flexbox + padding でデザインを作っています。
ですが、それでも margin を使いたいと感じたときがあります。
それは当ブログ記事の本文のセクション同士の余白です。
つまり理由1で述べた子要素同士の余白に該当するわけですが、記事の本文は Markdown から HTML に変換したものを埋め込んでおり、HTML の構造を自分で決められません。セクションの要素に display: flex を当てれば flexbox は可能ですが、実際に見ればわかるとおり、margin を使用しています。これは margin のほうがシンプルであり、HTML 構造が予測できない場合に強いためです。
シンプルで確実な margin の特性が活きる場合には margin を使う選択肢も十分考えられます。
#おわるまえに
余談ですが、margin が不要、使わなくなった、使うべきではないというのは執筆中に調べたら結構出てきました。
とくに一番上の Zenn の記事はこの記事と言いたいことが似ていて興味深いです。記事内で言われている「リセット CSS で margin というプロパティを使わないといけない」というのは盲点でした。
#おわり
いかがでしたか？
これからは余白には margin ではなく、flexbox + padding にお任せ！の時代ですね！