coderef

margin-trimLimited availability

The margin-trim CSS property removes the margins of child elements when they meet the edges of the container.

Not yet supported in all major browsers — check the table and provide a fallback.

Browser support

DesktopChrome
✕Not supportedup to 155
Current: 155
Edge
✕Not supportedup to 154
Current: 154
Firefox
✕Not supportedup to 157
Current: 157
Safari
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27
MobileChrome Android
✕Not supportedup to 155
Current: 155
Firefox Android
✕Not supportedup to 157
Current: 157
Safari iOS
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27

How to use

Not supported in Chrome, Edge, Firefox, Chrome Android, Firefox Android. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: margin-trim.

Feature detection

CSS · check before using
@supports (margin-trim: initial) {
  /* styles that rely on margin-trim */
}

/* or in JavaScript */
if (CSS.supports("margin-trim", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (8). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
margin-trim155✕✕16.4155✕16.4
margin-trim.block155✕✕16.4155✕16.4
margin-trim.block-end155✕✕16.4155✕16.4
margin-trim.block-start155✕✕16.4155✕16.4
margin-trim.inline✕✕✕16.4✕✕16.4
margin-trim.inline-end✕✕✕16.4✕✕16.4
margin-trim.inline-start✕✕✕16.4✕✕16.4
margin-trim.none155✕✕16.4155✕16.4