*Summary:* margin-trim lets a container suppress the margins of its child content where those margins meet the container's own edges. Authors constantly need to remove the "leftover" margin above the first child and below the last child of a box. Today, they do it with fragile :first-child/:last-child overrides or negative margins that break when content is reordered or conditionally rendered. margin-trim expresses that intent declaratively on the container itself so spacing stays between items without stray gaps at the edges.
At this time we're only planning to implement trimming for block containers as discussions around the need for flex/grid containers are still ongoing: https://github.com/w3c/csswg-drafts/issues/13731 *Bug:* https://bugzilla.mozilla.org/show_bug.cgi?id=2051240 *Specification:* https://drafts.csswg.org/css-box-4/#margin-trim *Standards Body:* W3C CSS Working Group. *Platform Coverage:* All *Preference:* layout.css.margin-trim.enabled (off by default). *DevTools Bug:* https://bugzilla.mozilla.org/show_bug.cgi?id=2051249 (tracking bug to verify margin-trim displays as expected in DevTools; no special tooling needed) *Extensions Bug:* None *Use Counter:* Uses the automatic CSS-property use counter for margin-trim (use.counter.css.*.margin_trim). *Standards-Positions Discussion:* https://github.com/mozilla/standards-positions/issues/994 *Other Browsers:* - Blink: Not released, but have partial implementation. - WebKit: shipped (since Safari 16.4). *web-platform-tests:* https://wpt.fyi/results/css/css-box/margin-trim https://wpt.fyi/results/css/css-box/parsing/ (margin-trim-*.html) -- You received this message because you are subscribed to the Google Groups "[email protected]" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion visit https://groups.google.com/a/mozilla.org/d/msgid/dev-platform/CAOozUge8A1uV8Dvrkr5ysu7DpnhySGuD4rWPKx8DybMCsPaYRw%40mail.gmail.com.
