margin-bottomに統一するための方法

marginは相殺が発生するプロパティなため、margin-topとmargin-bottomが混在しているとCSSのメンテがつらくなる。私はmargin-bottom教信者なので、それを布教したい。

Bootstrapの教え

margin-top は避けてください。垂直方向のマージンが壊れ, 予期しない結果が生じる可能性があります。 重要なのは単一の方向性がmarginより単純なメンタルモデルであることです。できるだけスタイルを継承して, fontや関連するプロパティの宣言を最小限に抑えてください。

https://getbootstrap.jp/docs/5.0/content/reboot/#approach

隣接セレクタ（次兄弟結合子）でmargin向きが変わる

margin-bottomで統一したいのに、リストコンポーネントのマージンをとるときに隣接セレクタを使用するとmargin-topが必要になることが多々ある。

/* margin-bottomに統一 */
.title {
  margin-bottom: 1rem;
}
.content {
  margin-top: 1rem;
}

/* 隣接セレクタを使うとmarginの向きが変わる */
.item + .item {
  margin-top: 1rem;
}

その対処法としては、:last-child疑似クラスでmargin-bottom: revertを使ってmarginをリセットする方法がある。revertを使うことで、margin-bottomに統一しつつ、最後の要素にはmargin-bottomを適用しないようにできる。

.item {
  margin-bottom: 1rem;
}

.item:last-child {
  margin-bottom: revert;
}

リストのmarginはgapを使う

昨今のCSS事情を考えるとリストのようなコンポーネントの要素間はgapを使うのが良い。

.item-list {
  gap: 1rem;
}