# margin-trim

Estado: Safari 16.4 (block; `block inline` en 26.0); Chrome 155 (según caniuse, todavía no estable a fecha 2026-09); Firefox todavía no. No es Baseline.  
Fuente: 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/es/css/margin-trim

Elimina los márgenes del primer y último hijo en los bordes del contenedor, así que el padding de una tarjeta se mantiene exacto sin importar los márgenes propios del contenido. Acaba con las reglas `> :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: Conserva los reseteos de margen `:first-child`/`:last-child` junto a ella.

## Prompt

Pon `margin-trim: block` en contenedores con padding (tarjetas, avisos, envoltorios de prosa) para que los márgenes de los hijos se recorten en los bordes, y conserva `> :first-child { margin-block-start: 0 } > :last-child { margin-block-end: 0 }` como respaldo hasta que Chrome y Firefox lo publiquen.