margin-trim

Safari 16.4 (block; `block inline` in 26.0); Chrome 155 (laut caniuse, Stand 2026-09 noch nicht stable); Firefox noch nicht. Nicht Baseline.

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

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.

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

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

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.