CSS margin-trim Property

Removes unwanted margins from child elements when they align with the boundaries of their parent container.

selector { margin-trim: value; }
none Default value that performs no margin trimming on the container's children.
in-flow Trims the margins of in-flow children that meet the edges of the container.
all Trims the margins of children on all four sides of the container.
block Trims the margins of children at the start and end of the block axis.
block-start Trims only the margin of the first child at the start of the block axis.
block-end Trims only the margin of the last child at the end of the block axis.
inline Trims the margins of children at the start and end of the inline axis.
inline-start Trims only the margin of children at the start of the inline axis.
inline-end Trims only the margin of children at the end of the inline axis.

Code Examples

A basic example showing how a container can automatically trim the top and bottom margins of its paragraph children.

<style>
.card {
  background: #f4f4f4;
  padding: 20px;
  border: 1px solid #cccccc;
  margin-trim: block;
}
.card p {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
<div class="card">
  <p>The top margin of this paragraph is trimmed because it touches the top of the card.</p>
  <p>The middle paragraph keeps its margins for spacing.</p>
  <p>The bottom margin of this paragraph is trimmed to keep the card padding uniform.</p>
</div>

An advanced example using JavaScript to toggle the margin-trim property, demonstrating how it affects the container's layout height dynamically.

<style>
.container {
  border: 2px solid #333333;
  padding: 15px;
  transition: background 0.3s;
}
.container.trim-active {
  margin-trim: block;
  background: #e7f3ff;
}
.item {
  margin: 30px 0;
  background: #ffffff;
  border: 1px solid #999999;
}
</style>
<div id="box" class="container">
  <div class="item">Item 1 (Has 30px top/bottom margin)</div>
  <div class="item">Item 2 (Has 30px top/bottom margin)</div>
</div>
<button onclick="toggleTrim()">Toggle Margin Trim</button>
<script>
function toggleTrim() {
  const box = document.getElementById("box");
  box.classList.toggle("trim-active");
  const isActive = box.classList.contains("trim-active");
  console.log("Margin trim is now: " + (isActive ? "block" : "none"));
}
</script>

Pro Tip

If you are building a modern component library, use margin-trim: block; on your layout containers. This allows users of your components to toss in any elements with standard margins without them worrying about 'double-spacing' at the bottom of the card or container.

Deep Dive

Think of margin-trim as an automatic 'haircut' for your layout. Usually, when you give all items in a list a 'margin-bottom: 20px', that last item creates an annoying 20px gap at the very bottom of your container that shouldn't be there. Traditionally, we fixed this by using 'last-child { margin-bottom: 0; }'. This property handles that logic for you at the container level. When enabled, the browser looks for any child margin that touches the container's edge and snips it off, ensuring your container's padding is the only thing controlling the outer space. It works on the concept of 'coinciding' margins, meaning the margin must logically reach the edge of the parent box to be eligible for trimming.

Best Practices

Use this on components like cards, sidebars, or article wrappers where you have multiple children with consistent spacing. It keeps your CSS clean because you won't need to write specific pseudo-class overrides like ':first-child' or ':last-child' to fix layout gaps. Stick to 'block' for most vertical stacks to ensure the top and bottom of your container stay flush with your intended design.

Common Pitfalls

The biggest trap right now is browser support; currently, Safari is the only major engine with full implementation. Also, keep in mind that margin-trim only works on margins that 'touch' the edge. If the parent container has its own padding, the child's margin might not technically be coinciding with the container's edge in some implementations, though the spec is designed to handle this. Don't rely on it for critical layouts without a fallback until Chrome and Firefox catch up.

Accessibility

This property is purely a visual layout tool and has no direct impact on screen readers or document structure. However, by ensuring consistent spacing, you improve the visual hierarchy and readability for users with cognitive or visual impairments.

Dev Data Table: margin-trim property

default none
animatable no
inherited no
experimental yes
year_intro 2020
year_standard 0
js_syntax_1 element.style.marginTrim = "block";
js_syntax_2 element.style.setProperty("margin-trim", "block");
js_note Target this property using camelCase marginTrim or the standard setProperty method in your scripts.
browsers { "Chrome": 0, "Edge": 0, "Firefox": 0, "Safari": 16.4, "Opera": 0, "Chrome Android": 0, "Safari on iOS": 16.4, "Samsung Internet": 0, "Opera Mobile": 0 }
results render here...