margin-trim

Experimental

An experimental property that 'trims' the margins of child elements when they hit the edges of their container. It's a cleaner way to handle things like the last item's margin-bottom.

.container {
  /* Automatically removes bottom margin from the last child */
  margin-trim: block-end;
}
Initial value
none
Inherited
No
Applies to
blockContainersAndMultiColumnContainers
Animation type
discrete

Values

nonein-flowall
Limited availability 13% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

16.4+
ESC