Nice video Timothy! I almost always use the last method because I prefer the idea of having a set gap between elements instead of a top or bottom margin.
This is great! I use the 4th method as I feel like my html can be more structured in this way (colapsables). Also, .flex, .d-vertical, .a-center, .j-center, and .j-space-between are classes that I use in every project. .gap-v-n is something that I reuse as well, so I feel like this method happens to make my css more efficient too
We use margins wrapped around items that need space, and always use bottom margin. If you need to delete the paragraph, you would just delete the margin wrapper it's housed in. I take advantage of the flexbox margin addition feature by making a margin-wrapper class to combine our margins (which follow the rule of 4s - 4, 8, 12, 16, 24, 32, 48, 64, 80, etc) to add them up to create other spacings that designers often use. Need 40px? use an 8 inside of a 32 inside of a margin wrapper. (using them inside each other, rather than stacking them removes the empty div showing up in the designer, but also limits you to only nesting the two margins.)
Fantastic video! I‘d like to know how you set up a responsive styleguide with your spacing divs as I feel like it’s a bit of a hassle. Adjusting the value of each spacing class (e.g. XS, S, M…) seems a bit heavy. How do you approach this? Do you use any specific technique for this? I used to work with flex gap as well but I came across the same downside as you with tons of combo classes and alignment conflicts.
Great topic. I used all four options, and still can't tell which one is the most flexible to use in most cases. Which one do you choose the most for you projects?
A solution to the div problem can be to have ::before or ::after in display-block with you [class*="class-name"]::after {...} technique, so we can use the div spacing technique without adding more elements. We will be able to show the entire block and not collapses margins. It will be a combination of the technique 1 and 2. What do you think ?
I love the creative thinking! ::before and ::after elements go inside the element we’re applying them to. So I’m not sure that this would differ much from using top or bottom padding on the element instead. I would love to be able to apply spacing directly to a heading or button instead of using wrapper or spacer divs, but it’s not a scaleable solution because of how webflow handles combo classes.
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Ohhhhh, so this is why the margins were not always absorbed. Mind blown 🤯 Thanks a lot Tim!
Nice video Timothy! I almost always use the last method because I prefer the idea of having a set gap between elements instead of a top or bottom margin.
Timothy I'm really thankful for your tutorials, you explain this concepts in an awesome way
This is great! I use the 4th method as I feel like my html can be more structured in this way (colapsables). Also, .flex, .d-vertical, .a-center, .j-center, and .j-space-between are classes that I use in every project. .gap-v-n is something that I reuse as well, so I feel like this method happens to make my css more efficient too
The information I need! One question; however: Which of these spacing methods do you see/recommend as best practice?
So glad this helps! Usually I like to use wrapper divs, but I've used all four of these methods before for different purposes.
We use margins wrapped around items that need space, and always use bottom margin. If you need to delete the paragraph, you would just delete the margin wrapper it's housed in. I take advantage of the flexbox margin addition feature by making a margin-wrapper class to combine our margins (which follow the rule of 4s - 4, 8, 12, 16, 24, 32, 48, 64, 80, etc) to add them up to create other spacings that designers often use. Need 40px? use an 8 inside of a 32 inside of a margin wrapper. (using them inside each other, rather than stacking them removes the empty div showing up in the designer, but also limits you to only nesting the two margins.)
I am liking the flex option, creating 4 extra combos will result in a more planning ahead but there is no way I am creating divs just for margins 😅
Fantastic video! I‘d like to know how you set up a responsive styleguide with your spacing divs as I feel like it’s a bit of a hassle. Adjusting the value of each spacing class (e.g. XS, S, M…) seems a bit heavy. How do you approach this? Do you use any specific technique for this? I used to work with flex gap as well but I came across the same downside as you with tons of combo classes and alignment conflicts.
Great topic. I used all four options, and still can't tell which one is the most flexible to use in most cases. Which one do you choose the most for you projects?
Just saw the first comment.😅 wrapper divs, got it!
Haha, yes! I use all of them pretty heavily except margin.
A solution to the div problem can be to have ::before or ::after in display-block with you [class*="class-name"]::after {...} technique, so we can use the div spacing technique without adding more elements. We will be able to show the entire block and not collapses margins. It will be a combination of the technique 1 and 2. What do you think ?
I love the creative thinking! ::before and ::after elements go inside the element we’re applying them to. So I’m not sure that this would differ much from using top or bottom padding on the element instead. I would love to be able to apply spacing directly to a heading or button instead of using wrapper or spacer divs, but it’s not a scaleable solution because of how webflow handles combo classes.
@@timothyricks Ohhhh yes I see what you're saying that's right. Good point.
Do spacer divs affect SEO or accessibility in terms of best practices? It feels like cheating to me.
I don’t believe so. In the designer, it looks like a more clunky solution, but screen readers and search engines shouldn’t treat it any differently.
@@timothyricks Great, I think I'll give them a go. I seem to spend an inordinate amount of time tweaking margin spacing. Thanks for sharing.
Using div blocks is my favourite, its nice to be able to just click the div on canvas without having to search it in the navigator