margin-trim on Block Containers in Chrome 155 Fixes the Last Margin Problem

Chrome 155 extended margin-trim to block containers and multi-column containers. The property trims the margins that touch the edge of a container, so the space inside is yours to set.

Everyone has met the problem. A card holds a heading and a paragraph, each with a bottom margin, and the last one leaves extra space at the bottom of the card. The usual fix is a rule that removes the margin from the last child, and it is easy to forget.

With margin-trim you set the rule once on the container. The content spacing stays between items and disappears at the ends, which is what you wanted in the first place.

We like it in component libraries, where a component should not care what sits above or below it. It is a small step towards components that behave the same wherever they are used.

Support is still arriving across browsers, so keep your existing last-child rule until your audience has caught up, and then delete it.