margin-trimで先頭/末尾のmarginを削除する

margin-trimを使うことで、コンテナ要素の先頭と末尾のmarginを削除できる。

p要素のように上下にmarginを持つ要素を並べるとき、marginの向きを一方向に制限し、かつmargin-topを使うなら先頭の要素の、margin-bottomを使うなら末尾の要素のmarginをresetする必要があった。

/** margin-bottomに統一する場合 */
p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

/** margin-topに統一する場合 */
p + p {
  margin-top: 1rem;
}

margin-trimを使うとblock、またはinline方向の最初と最後のmarginを削除できる。

<section style="margin-trim: block">
  <p>...</p>
  <p>...</p>
  <p>...</p>
  ...
</section>

デモ

※執筆時点では、Safariのみサポート。