margin-trim
The margin-trim CSS property removes the margins of child elements when they meet the edges of the container. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The margin-trim CSS property removes the margins of child elements when they meet the edges of the container. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
margin-trim Experimental | | | | 16.4 | | 16.4 |
block Experimental | | | | 16.4 | | 16.4 |
block-end Experimental | | | | 16.4 | | 16.4 |
block-start Experimental | | | | 16.4 | | 16.4 |
inline Experimental | | | | 16.4 | | 16.4 |
inline-end Experimental | | | | 16.4 | | 16.4 |
inline-start Experimental | | | | 16.4 | | 16.4 |
none Experimental | | | | 16.4 | | 16.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.card {
margin-trim: block;
padding: 16px;
}
.card > * {
margin-block: 16px;
}Live demo
Use cases
Use margin-trim
Use margin-trim when the default CSS behavior is not expressive enough for the component or layout you are building.
Handle edge cases
Apply margin-trim to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test margin-trim in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using margin-trim does not make content harder to perceive, understand, or operate in assistive contexts.
Related links
Powered by web-features