margin-trim で最後の子要素の余白を親側でカット
親に margin-trim: block-end を書くだけで、最後の子要素の下マージンが自動で消える。
どんな時に使う？
カードやセクション内で p { margin-bottom: 20px } のように子要素に余白を付けると、最後の要素の下に余計な余白が残る。これまでは :last-child { margin-bottom: 0 } や > * + *（ロボットのお尻）で対処していたが、最後に来るのが p でも ul でも親側1行で解決できる。
コード
css
.card {
margin-trim: block-end; /* 親の下端に接する子のマージンを切る */
}
.card p,
.card ul {
margin-bottom: 20px;
}- 値:
block/inline/block-start/block-end/inline-start/inline-endなど。 - 親コンテナの端に接している子のマージンだけが対象。
注意点・対応状況
- Safari は 16.4 から対応。投稿および国内メディア（コリス等）によると Chrome 155 で対応。Firefox の対応状況は Can I use で要確認。
- 未対応ブラウザでは単に余白が残るだけなので、プログレッシブエンハンスメントとして使いやすい。