margin-trim: none; margin-trim: in-flow; margin-trim: all;  /* Global values */ margin-trim: inherit; margin-trim: initial; margin-trim: revert; margin-trim: unset; 

margin-trim

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

Syntax

margin-trim: none; margin-trim: in-flow; margin-trim: all;  /* Global values */ margin-trim: inherit; margin-trim: initial; margin-trim: revert; margin-trim: unset; 

Values

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

Formal syntax

none | in-flow | all

Examples

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;   ... } 

Specifications

See also