Web features explorer

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.

Developer 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]