Intent to prototype: margin-trim

[Tiaan Louw]

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)