Day 96: the margin-trim property

posted on

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;
}
  • A
  • B
  • C
  • D

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

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

See on CodePen

Further reading

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!

Overview: 100 Days Of More Or Less Modern CSS