Day 96: the margin-trim property
source link: https://www.matuzo.at/blog/2023/100daysof-day96/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
- 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;
}Further reading
Want more?
Overview: 100 Days Of More Or Less Modern CSS
My blog doesn't support comments yet, but you can reply via e-mail.
Recommend
-
7
Day 3: logical property shorthands posted on September 28., 2022 It’s time to get me up on speed with modern CSS. There’s so much new in CSS that I know too little about. To change...
-
9
Day 9: the inset shorthand property posted on October 6., 2022 It’s time to get me up on speed with modern CSS. There’s so much new in CSS that I know too little about. To change th...
-
5
Day 20: the scrollbar-gutter property posted on October 21., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little abo...
-
4
How to scale margin and padding with @ScaledMetric Property Wrapper Table of Contents ...
-
6
Day 24: the backdrop-filter property posted on October 27., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little abou...
-
8
Day 27: the font-variation-settings property posted on November 1., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too lit...
-
8
Day 47: the overscroll-behavior property posted on November 29., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little...
-
11
Day 72: the masonry-auto-flow property posted on January 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 abo...
-
5
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10858 鑫空间-鑫生活 本文欢迎分享与聚合，全文转载...
-
10
June 12, 2023 margin-trim as a best practice? It’s not every day there is a new “best practice” for CSS, since it’s such a huge, ubiquitous, and highly used language. But here’s one, mayb...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK