CSS｜要素の間に余白をつける

要素が並んでいて、間に余白をつけるとき、あなたは何派ですか？

1. それぞれクラス名を別々につける
2. gap
3. :not:(first-child）
4. 隣接セレクタ
5. その他

今まで隣接セレクタを使う機会が少なかったので、練習しておきます。

See the Pen Untitled by Hiroyuki Doke (@hiroro-d) on CodePen.

隣接セレクタの説明

See the Pen Untitled by Hiroyuki Doke (@hiroro-d) on CodePen.

ちなみにSassを使えば「＆ ＋ ＆」で実現できます。

アンバサンド.scss

      & + & {
        margin-top: 20px;
      }

他の人が見たら「なんだこれ？」ってなりそうですね。