The margin-trim
property allows the container to trim the margins of its children where they adjoin the containerβs edges.
Syntax
none
- Margins are not trimmed by the container.
in-flow
-
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.
all
- 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
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
Specification | Status |
---|---|
CSS Box Model Module Level 4 The definition of 'margin-trim' in that specification. |
Editor's Draft |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
margin-trim | Chrome No support No | Edge No support No | Firefox
No support
No
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
No support
No
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.