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:

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.

Useful Resources

Can I use...margin-trim

CSS Box Model Module Level 4 - margin-trim