Limited support Use with care and confirm browser support before shipping it to all users.

margin-trim

Experimental: This is an experimental technology

Check the Browser compatibility table carefully before using this in production.

The margin-trim property allows the container to trim the margins of its children where they adjoin the container's edges.

Syntax and cascadeLayout

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

margin-trim: block

CSS Margin-trim: block demo.

PreviewFullscreen

Without Trimming

CSS Without trimming demo.

PreviewFullscreen

Inline trimu

CSS Inline trimu demo.

PreviewFullscreen

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