margin-trim
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
margin-trim プロパティにより、コンテナーの辺に隣接する子のマージンを切り取ることができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
margin-trim 実験的 | | | | 16.4 | | 16.4 |
block 実験的 | | | | 16.4 | | 16.4 |
block-end 実験的 | | | | 16.4 | | 16.4 |
block-start 実験的 | | | | 16.4 | | 16.4 |
inline 実験的 | | | | 16.4 | | 16.4 |
inline-end 実験的 | | | | 16.4 | | 16.4 |
inline-start 実験的 | | | | 16.4 | | 16.4 |
none 実験的 | | | | 16.4 | | 16.4 |
基本構文
CSS
.card {
margin-trim: block;
padding: 16px;
}
.card > * {
margin-block: 16px;
}ライブデモ
実務での使いどころ
-
コンテナ端のマージン自動除去
カードコンポーネントでmargin-trim: blockを設定し、先頭・末尾の子要素の不要な上下マージンを自動的に除去します。
注意点
- 2026年3月時点でSafariのみの対応です。フォールバックとして:first-child/:last-childのマージンリセットを併用してください。
アクセシビリティ
- margin-trimは純粋にレイアウトの調整であり、アクセシビリティに直接影響しません。