margin-trim

Safari 16.4 (block; `block inline` in 26.0); Chrome 155 (per caniuse, not yet stable as of 2026-09); Firefox not yet. Not Baseline.

Chrome 155 (upcoming)Edge 155 (upcoming)Safari 16.4Firefox no

Removes the margins of the first and last children at the container's edges, so a card's padding stays exact no matter what the content's own margins are. Ends `> :first-child{margin-top:0}` rules.

Title

Paragraph with its own margins.

CSS

.fx-045 {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-trim: block;
  font-family: system-ui
}
.fx-045 > :first-child {
  margin-block-start: 0
}
.fx-045 > :last-child {
  margin-block-end: 0
}
 /* fallback */

HTML

<div class="fx-045"><h3>Title</h3><p>Paragraph with its own margins.</p></div>

Fallback: Keep the `:first-child`/`:last-child` margin resets alongside it.

Source: caniuse.com/mdn-css_properties_margin-trim and https://webkit.org/blog/17333/webkit-features-in-safari-26-0/

Prompt

Set `margin-trim: block` on padded containers (cards, callouts, prose wrappers) so child margins are trimmed at the edges, and keep `> :first-child { margin-block-start: 0 } > :last-child { margin-block-end: 0 }` as the fallback until Chrome and Firefox ship it.