The margin-trim property allows the container to trim the margins of its children where they adjoin the container’s edges.


Margins are not trimmed by the container.

For in-flow boxes contained by this box, block-axis margins adjacent to the box's edges are truncated to zero.

It also truncates any margins collapsed with such a margin.

Trims the margins of in-flow boxes and floats whose margins coincide with the container's content edge.

Formal definition

Initial value none
Applies to Block containers and multi-column containers. It also applies to ::first-letter and ::first-line.
Inherited no
Computed value as specified
Animation type discrete

Formal syntax

none | in-flow | all


Basic usage

Once support is implemented for this property, it will probably work like so:

When you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this:

article {
  background-color: red;
  margin: 20px;
  padding: 20px;
  display: inline-block;

article > span {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
  margin-right: 20px;

The problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it:

span:last-child {
  margin-right: 0;

It is a pain having to write another rule to achieve this, and it is also not very flexible. Instead, margin-trim could fix it:

 article {
  margin-trim: in-flow;


Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
margin-trim No No No
See bug 1506241.
No No No
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
margin-trim No No No
See bug 1506241.
No No No

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.