margin-trim

Safari 16.4 (block; `block inline` no 26.0); Chrome 155 (segundo o caniuse, ainda não stable em 2026-09); Firefox ainda não. Não é Baseline.

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

Remove as margens do primeiro e do último filho nas bordas do container, então o padding de um card fica exato independentemente das margens do próprio conteúdo. Acaba com as regras `> :first-child{margin-top:0}`.

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: Mantenha os resets de margem de `:first-child`/`:last-child` junto.

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

Prompt

Defina `margin-trim: block` em containers com padding (cards, callouts, wrappers de prosa) para as margens dos filhos serem aparadas nas bordas, e mantenha `> :first-child { margin-block-start: 0 } > :last-child { margin-block-end: 0 }` como fallback até o Chrome e o Firefox entregarem.