CSS の margin-trim でコンテナーの端の余白を取り除く

2026 年 9 月 27 日時点で、margin-trim はすべての主要ブラウザーで利用できる機能ではありません。Safari 16.4 で導入されていますが、Chromium や Firefox では未対応です。 カードの上下に余分な余白ができる まずは、margin-trim を使わない場合の余白を確認しましょう。次のカードには、見出しと 2 つの段落があります。 <article class="card"> <h2>カードのタイトル</h2> <p>最初の段落です。</p> <p>最後の段落です。</p> </article> カードに 24px のパディングを設定し、見出しと段落には上下に 16px のマージンを設定します。 .card { padding: 24px; border: 1px solid; } .card > h2, .card > p { margin-bl

[miruto]

便利だけど、flexよりもgridを使うことが増えそう

[rogertroutman]

異常に便利

[nguyen-oi]

first-childの打ち消し地獄から解放される神プロパティだから早く全ブラウザ対応してくれ