margin-trim
Limited availability
The margin-trim CSS property removes the margins of child elements when they meet the edges of the container.
Browser support
- Chrome Not supported Bugs: 40886857 40886857
- Chrome Android Not supported Bugs: 40886857
- Edge Not supported Bugs: 40886857
- Firefox Not supported Position: positive Bugs: 1506241
- Firefox for Android Not supported Position: positive Bugs: 1506241
- Safari 16.4 Released on 2023-03-27
- Safari on iOS 16.4 Released on 2023-03-27
Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.
MDN documentation
Specifications
Web Platform Tests (WPT)
View the latest WPT test results for this featureDeveloper use cases
-
There is many times where the margins at the top and bottom of the first and last element in some box are annoying and I find myself adding both `margin-trim`, as well as some workaround. Really hope `margin-trim` gets here soon, so I can remove those workarounds from my code. I'm also more than mildly annoyed by the fact that the [margin collapsing quirk](https://github.com/whatwg/html/issues/10296) has to exist, which could've been fixed, had `margin-trim` been a thing 25 years ago. So this property has a special place in my heart :)
There is many times where the margins at the top and bottom of the first and last element in some box are annoying and I find myself adding both `margin-trim`, as well as some workaround. Really hope `margin-trim` gets here soon, so I can remove those workarounds from my code. I'm also more than mildly annoyed by the fact that the [margin collapsing quirk](https://github.com/whatwg/html/issues/10296) has to exist, which could've been fixed, had `margin-trim` been a thing 25 years ago. So this property has a special place in my heart :) [see original comment]
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist