3 ms·
margin-trim is basically a simpler alternative to adding a margin-bottom to every child, then removing the margin-bottom from the last child with :last-child {
by tshaddox 3y ago
margin-trim is basically a simpler alternative to adding a margin-bottom to every child, then removing the margin-bottom from the last child with :last-child { margin-bottom: 0; }
Flex with gap is also an alternative to that, and in my view should be the default thing you reach for. But there are some cases where the child margin approach has benefits, particularly if you're doing certain animations/transitions or if you want each child to essentially override its top or bottom gap.
- MrJohz 3y agoBut can't you do .selector:not(:last-child) ? Or .selector + .selector ? Both of these seem clearer than adding an extra property just to handle this case. Like, I understand the situation, I've been in that place plenty of times. But I've never felt in want of a solution there.
- deleted 3y ago[deleted]
- spdustin 3y agoI often use the so-called "lobotomized owl selector" (* + *) in the reset I use for my own internal tools. More specifically: * { margin: 0; padding: 0; } * + * { margin-top: 1em; }