# margin-trim

Status: 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.  
Fonte: https://caniuse.com/mdn-css_properties_margin-trim and https://webkit.org/blog/17333/webkit-features-in-safari-26-0/  
Página: https://designforai.dev/pt/css/margin-trim

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}`.

## HTML

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

## CSS

```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 */
```

Fallback: Mantenha os resets de margem de `:first-child`/`:last-child` junto.

## 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.