1. css
  2. /properties
  3. /margin-trim

margin-trim

Overview

The margin-trim property enables you to trim the margins of a container element's children when they intersect the container's boundaries. This helps to avoid unnecessary extra space at the edges of the container.

Caution: The margin-trim property is part of the CSS Box Model Module Level 4 specification, which is currently in Editor's Draft status. The definition and information about this property may be subject to change before its potential adoption.

Examples and Usage

First, let's consider an HTML structure with a list of items:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
</ul>

To create some spacing between the list items, you can use the following CSS:

li:not(:last-child) {
  margin-block-end: 1.5rem;
}

The code above will add a margin to the block-end of every list item, except for the last one.

Once the margin-trim property is potentially adopted, you would achieve the same result using the following CSS:

ul {
  margin-trim: block-end;
}

li {
  margin-block-end: 1rem;
}

With margin-trim, you can specify that the margin at the block-end of the list should be trimmed, introducing a more readable and elegant approach.

Syntax and Values

The margin-trim property accepts the following values:

margin-trim: none|block|block-start|block-end|inline|inline-start|inline-end|

Each value serves a specific purpose:

ValueDescription
noneNo margin trimming will occur.
blockTrims both block-start and block-end margins.
block-startTrims the block-start margin.
block-endTrims the block-end margin.
inlineTrims both inline-start and inline-end margins.
inline-startTrims the inline-start margin.
inline-endTrims the inline-end margin.

Associated Properties

  • margin
  • margin-block
  • margin-block-end
  • margin-block-start
  • margin-inline
  • margin-inline-end
  • margin-inline-start

Tips and Tricks

  • Keep in mind that the property only works on block containers and may not apply to all layout contexts.

  • In the meantime, consider using alternative selectors, flexbox, or grid layout to control margins and achieve similar results.

  • Stay informed about its progress and updates to ensure your code remains up-to-date and effective. (see useful resources below)

Browser Compatibility

Note: Safari Technology Preview is currently the only browser that supports the margin-trim property.

BrowserFirefoxChromeEdgeInternet ExplorerOperaSafari
SupportNoNoNoNoNoYes

Useful Resources

Can I use...margin-trim

CSS Box Model Module Level 4 - margin-trim