Draft
This page is not complete.
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 syntax
none | in-flow | all
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Box Model Module Level 4 |
| 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 |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| 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.