The Next Big Thing in CSS: margin-trim!

[@dmtrmrv]

Hey team! I've been asked a few times why I didn't use the gap property in the demos. I definitely should have covered it in the video, but I'll answer here. Gap is a perfectly valid approach for spacing, but it's not always the best tool for every situation. For instance, when styling article content, you might need different spacing between various elements, like more space before headings. Gap won't work for that because you can't set different values for different elements within the same container without resorting to hacks. I discuss this in more detail in this video: kzbin.info/www/bejne/pWOaZKWamJmsn5Y.

[@MrJettann]

You can use gap with margins to achieve different spacing between elements, for example, if you have 5 fields and 2 or 3 spaces between them are equal, use gap and add extra margin to field with different spacing

[@scnix]

If you need different custom spaces between elements, just use gap and that custom space for that 1 element that needs it?

[@JoeSnellPDX]

Gap is perfectly reasonable under certain contexts. However, I find with using margin (now especially with margin-trim) I have more control and resilience on vertical rhythm that I want to be content relative with a single property. Again, it depends more on context and the problem I'm trying to solve. For me, I tend to lean in preference on using margin over gap. I love these videos and the corresponding discussions. Great stuff!

[@jackwright517]

Gap to me also doesn't feel like the most semantic way to handle it either. I see gap as a layout mechanism, but margin is for flow. Gap always requires a parent be set to grid or flex, but margin doesn't. Gap feels like a cheap win at first, but it's not really as sustainable!

[@dmtrmrv]

@@jackwright517 Yeah, gap is great for grids. Vertical rhythm is much better achieved with margins, couldn't agree more!

[@greendsnow]

Use gap or space instead ?

[@dmtrmrv]

Yes, gap is a perfectly valid option, but for cases when you can't use it (see pinned comment), margin trim will be a game changer.

[@Jan-yn4tl]

Avoid margin top and adjust that padding of the parent (keep this logic for all things). The small padding bottom is useful in many other cases too, plus the margin-top is bad approach in general - thats why most browser have larger “p” margin bottom at least larger if not only on bottom. h tags as well. It is also mentally closer to the paragraph expectation. Enter .. space below not on top of paragraph etc.

[@soumiil]

You're the one who improved my CSS writing skills, literally feeling that finding your channel was the luckiest moment for me. Love from India bro 🇮🇳❤

[@dmtrmrv]

Thank you Soumil, so happy to hear that!

[@seankennedy7970]

Literally been dealing with this at work this week. This will make styling h# tags so much simpler once we can use it.

[@dmtrmrv]

Yeah, gonna be a game-changer!

[@tropheecommerce]

Also possible to control the specificity using :where pseudo-selector, but this new property is really nice, thanks for the share

[@scream_loud]

I semi-like new features in CSS. The reason why is every new feature require users to update their browsers. "Oh, there's a new cool feature with margins!" ends up me writing backwards compatibility code, 'cause that "new feature" covers X% of modern browsers, so there's even more code in my CSS file. I'd love to see a simple, yet - imo - powerful solution like jQuery has. One library that will cover most, if not every, feature without updating browsers, reseting selectors, so they'll have same values in every browser etc. One library that will tell browser how to render things. It won't be super required, since many browsers already have built-in features like "grid", "gap", etc., but things like "margin-trim", "container queries", "viewport units" etc. and many, many more will actually work even on older browsers, up to IE11 (same as jQuery, i believe).

[@Zmeu213]

What's your problem? .content-flow { display: flex; gap: 2rem }

[@tanis6371]

and flex-direction:column;

[@dmtrmrv]

Gap also works, but it's not the best option for some cases (see pinned comment). For those, margin-trim will make it easier to style the component.

[@KOBE42__]

@@tanis6371or just use display:grid - grid by default is a column

[@lvekua]

Thank you Dimitry! Really like your content. keep up the good work! 🙌

[@dmtrmrv]

My pleasure! Thank you for the comment!

[@jubinka]

I remembered to use margin-trim today but it didn't work, so I came back to your video to see if I'd done something wrong only to find out that it was an experimental feature 🥲 tysm for covering it and hope to see more tips and tricks soon!

[@dmtrmrv]

Yeah, we have to wait for this one. Hope we'll see more support soon.

[@VeitLehmann]

Yay, this is neat! Thanks for sharing!

[@dmtrmrv]

You bet!

[@Dorchwoods]

Any particular reason why you wouldn't just use flex or grid with the gap property to achieve this same thing?

[@dmtrmrv]

Hey @Dorchwoods, thanks for the question! Using gap is a valid approach, but sometimes it's just not enough. Imagine creating a vertical rhythm inside an article component; you might want different spacing between elements within the same container. I talk more about gap vs. margin in a previous video. Check it out starting at 7:28. Let me know if this answers your question!

[@X6millionways2di]

Because it wont work with Safari If your using Flex grid gap

[@Dorchwoods]

@@X6millionways2di Hmm it seems to work fine for me. I even built a utility web component to make it even easier, ie: I may look into adjusting it to use margin-trim eventually

[@CaiN805]

Привет, классный контент, рад видеть коллегу из 74 региона)

[@asdasdasd21314131]

Is there a reason to go for this approach instead of using flex with gap?

[@dmtrmrv]

@asdasdasd21314131 Yeah, you'd go for this approach if you need to have different space between the elements in the container. I talk more about it in this video: kzbin.info/www/bejne/pWOaZKWamJmsn5Y

[@znkdev]

sorry my ignorance, why not using flex col gap?

[@dmtrmrv]

Good question! Gap works perfectly fine for some layouts but not for others. Check out this pinned comment and also this video: kzbin.info/www/bejne/pWOaZKWamJmsn5Y. I go into more detail about the differences between margin and gap there.

[@nonamenosurname666]

Unfortunately margin-trim is only supported on Safari browser and that's all... So what is a purpose to use this css property when websites and web application should work well with all browsers or at least with the most popular ?

[@dmtrmrv]

We should wait to use this one; that's why I started the video with the current approaches. It'll be great to use when the support is more widespread, though.

[@ItsEricPhung]

I'd use Flex Gap or Grid Gap all day.

[@codefinity]

Safari the first to adopt? 🤩

[@dmtrmrv]

Yeah, quite unusual

[@patrykkowalski8355]

what about support before i will say how cool is that :) same problem with all nice stuff, as i see on can i use, it 13.97% so almost nothing is supported, weird

[@dmtrmrv]

Yeah, for this one we'll have to wait until it's supported.

[@enenotowitch628]

flex col + gap?

[@dmtrmrv]

Gap is a valid option for some layouts, not a replacement for margins though. See pinned comment.

[@ico0z]

p+p and h1 margin-block-end... cant see the benefit there

[@groovebird812]

There are so many solutions for this case. Why is this the next big thing?

[@dmtrmrv]

It is a big improvement for components that handle spacing of inner components. Makes it much easier to read and understand the CSS.

[@bozzhik]

use tailwind class space-x-[ ] or-space-y-[ ]

[@dmtrmrv]

Under the hood those classes also margins between child elements, very similar to the > * + * selector.

[@bozzhik]

@@dmtrmrv yeah. I found this very interesting

[@jenssvanfelt]

div > *:nth-child(n+2) { margin-top: 1rem; }

[@dmtrmrv]

Yep, there are multiple ways to do it.

[@ukyo6195]

Why don’t use margin-bottom? 2rem And the last one no one cares. Or last-child: 0

[@Twajn13]

Just use flex and gaps and you ll be happy man

[@dmtrmrv]

Happiness is the journey, not just margins, flex, and gaps. 😉

[@ginozem9569]

Lol supported by safari first is a terrible idea. Safari and firefox are always behind on useful css changes.

[@dmtrmrv]

Not in this case I guess, Safari jumped ahead!

[@CristianKirk]

Regardless of this becoming standard or not (most likely not), it's far from being a "big thing."

[@dmtrmrv]

Thanks for the comment. Big or small, it can depend on one's perspective.

[@Fanmade1b]

@@dmtrmrv that's what she said! (sorry, couldn't stop myself ^^) Very good video. I like your approaches, even though I probably would just have added a margin-bottom to these elements instead :) One recommendation though: You could include the caniuse link in the video description so that people can easily check at any time in the future whether the support for the property has improved.

[@dmtrmrv]

Thank you for the suggestion, added the link!

[@jkcrawl]

Call me dumb, I'm a noob so I'm not saying this to be a smart ass so feel free to correct me if I'm wrong: why not just put a margin-bottom on the paragraphs in that div? div p{ margin-bottom: 1rem; }

[@robinheyer708]

You've got the right idea but the content-flow class is written as a utility class so it can be applied anywhere. So in an article like he showed us. But you could use it in a card as well and then you could have very different tags like h3, img, p, all getting a standard spacing.

[@dmtrmrv]

No dumb questions on this channel! I second what @robinheyer708 said-the approach with the "all" selector works really well in cases of vertical rhythm where you need to add space between any elements and then tweak it for selected ones. Just adding margin-bottom, like in your example, will also add it to the last element, which could be unwanted.

[@scnix]

Meh, I'd give this upcoming property a 5/10. Nice to have but not very useful.

[@dmtrmrv]

Thanks for the comment, why do you think it's not useful?

[@scnix]

@dmtrmrv mainly because the use case for it highly specific. The only reason why someone uses it is to override the 1st child without pseudo classes, but the only reason why you need to do that in the 1st place is to have a class/style that's repeating. If you need something that's repeating, use gap, which eliminates the need for margin-trim. If you need a special case in the middle of the repeating style, then just add another class to override the repeating style where needed.