This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
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.
-
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.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-02-06T00:00:00+00:00) Day 96: the margin-trim property. Retrieved from https://www.scien.cx/2023/02/06/day-96-the-margin-trim-property-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.