Day 96: the margin-trim property

posted on 06.02.2023

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

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

Let’s say we have a parent element and 4 children, and we use margin-block-end to add some spacing between these elements.

<ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>D</li>
</ul>

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

That’s great, but to avoid the extra space at the end of the list, we want to make sure that the last item doesn’t get any margin. To achieve that, I’ve used at least 3 different solutions in the past.

Apply a margin on all elements and remove it from the last.
Okay, why not.

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

 li:last-child {
   margin-block-end: 0;
 }

Apply a margin on all elements but the last.
Looks clever, less lines, but harder to read.
```
 li:not(:last-child) {
   margin-block-end: 1rem;
 }
```
Use the lobotimized owl selector
My favorite for the longest time.
```
 ul > * + * {
   margin-block-start: 1rem;
 }
```

There are pros and cons to all solutions. Anyway, eventually we might not have to use any of them when we have this specific problem because margin-trim solves it more elegantly. We can define the property on the parent element and tell it where it should trim margins. Allowed values are none, block, block-start, block-end, inline, inline-start, and inline-end.


ul {
  margin-trim: block-end;
}

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

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

See on CodePen

Day 96: the margin-trim property

Further reading