Master CSS Spacing: Margin, Padding, and Gap Explained

[@DavidWaumsley]

Thanks so much for this. This is the kind of tutorial we need more of .

[@Flyers8810]

real world examples, not just isolated demos are so so so helpful! Thank you!

[@dmtrmrv]

Glad it was helpful!

[@adhipathis12]

Thank you, this helped me a lot. Please keep making more videos like these. 😄

[@dmtrmrv]

Glad it helped! Thank you :)

[@adhipathis12]

@@dmtrmrv Hi, I have a request. Could you please make a video about the design tokens (such as --size-1) and the essential ones needed before starting a project? Also, could you create a video discussing the CSS reset you use? Thank you!

[@dmtrmrv]

@adhipathis12 Thank you for the suggestion! I'll def make a video on design tokens. Stay tuned!

[@adhipathis12]

@@dmtrmrv thanks😀

[@Pharmtechie]

Thanks bro💯 Keep up the good work

[@writerkatya]

Thank you, it helped to solve my problem!

[@kristoferpersson6751]

This cleared a few things up for me, so thank you! 🙏 Is there a specific reason why you use "margin-block-start" instead of just "margin-top"? Subscribed!

[@dmtrmrv]

Happy to hear the video was helpful! Margin-block-start is a logical property, whereas margin-top is a physical one. I have a video planned about that, but in short, the first one is better because it supports different writing modes out of the box, like in the Japanese language, for example.

[@lysak_coding]

Damn your english is so good

[@dmtrmrv]

Thank you

[@NedumEze]

Sorry Dmitry, "site__header site-header". What's with the site-header class? Is this another flavor of BEM? Familiar BEM would have "site--header" for a Modifier as "site__header is correctly the Element's class.

[@dmtrmrv]

Hey @NedumEze! Great question. I think it is easier to think like this There is a `site` block: site site__header site__main site__footer And three separate blocks: `site-header`, `site-main`, `site-footer`. The first one acts as a container, like a box that holds actual `site-header`, `site-main`, `site-footer` blocks or other elements. It's perfectly fine to set margins on `site__header`, `site__main`, `site__footer` because they aren't used on their own outside of `site`. I talk more about it in this video too: kzbin.info/www/bejne/h6bblWifg6qjY5Y I know it may be a bit confusing at first, but this structure is very robust. It allows for easy swapping of components inside the header, main and footer while keeping spacing consistent. Let me know if this answers your question!

[@NedumEze]

@@dmtrmrv Thanks @dmtrmrv. It does. I appreciate.

[@dmtrmrv]

@NedumEze you are welcome!

[@romanperera]

margin-block* and padding-block* etc are new to me 😑

[@dmtrmrv]

Yeah! Those are logical properties. Very handy