margin-trim

コンテナの端に位置する子要素のマージンを自動的に削除するプロパティです。カードやセクションの内側で、最初や最後の子要素の不要なマージンを手動で除去する必要がなくなります。:first-childや:last-childでのマージンリセットという一般的なパターンを置き換える、よりエレガントなソリューションです。

マージン除去コンテナ

概要

対応ブラウザ

デスクトップ

Chrome 未対応

Edge 未対応

Safari 16.4+

Firefox 未対応

モバイル

Chrome Android 未対応

Safari iOS 16.4+

Firefox Android 未対応

基本構文

CSS

.card {
  margin-trim: block;
  padding: 16px;
}
.card > * {
  margin-block: 16px;
}

実務での使いどころ

コンテナ端のマージン自動除去

カードコンポーネントでmargin-trim: blockを設定し、先頭・末尾の子要素の不要な上下マージンを自動的に除去します。

注意点

2026年3月時点でSafariのみの対応です。フォールバックとして:first-child/:last-childのマージンリセットを併用してください。

参考リンク

MDN Web Docs — margin-trim

概要