# margin-trim

Status: Safari 16.4 (block; `block inline` in 26.0); Chrome 155 (laut caniuse, Stand 2026-09 noch nicht stable); Firefox noch nicht. Nicht Baseline.  
Quelle: https://caniuse.com/mdn-css_properties_margin-trim and https://webkit.org/blog/17333/webkit-features-in-safari-26-0/  
Seite: https://designforai.dev/de/css/margin-trim

Entfernt die Margins des ersten und letzten Kindes an den Containerkanten, sodass das Padding einer Karte exakt bleibt, egal welche eigenen Margins der Inhalt hat. Beendet `> :first-child{margin-top:0}`-Regeln.

## 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: Behalte die `:first-child`/`:last-child`-Margin-Resets daneben.

## Prompt

Setze `margin-trim: block` auf gepolsterte Container (Karten, Callouts, Prosa-Wrapper), damit Kind-Margins an den Kanten abgeschnitten werden, und behalte `> :first-child { margin-block-start: 0 } > :last-child { margin-block-end: 0 }` als Fallback, bis Chrome und Firefox es ausliefern.