Day 96: the margin-trim property

posted on February 3., 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.

1. 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;
   }

2. 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;
   }
   

3. 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;
}

See on CodePen.

Further reading

Want more?

1. Previous post: Day 95: the color-mix() function

Overview: 100 Days Of More Or Less Modern CSS

My blog doesn't support comments yet, but you can reply via e-mail.