Why adding a margin on a child element affects the parent

In this video I'll explain why adding margin-top to a child element sometimes moves the parent element down and creates a white space, what margin collapse is, and how you can fix it.

____________________________

SUPPORT THE CHANNEL
👏🏽 Hit the THANKS button in any video!

WANT TO LEARN WEB DEV?
Check out my courses:

RECOMMENDATIONS

🔽 FOLLOW CODER CODER

#webdevelopment #coding #programming

[rein]

How do you come up with such brilliant and humorous thumbnails recently?? 😂😂

[squky]

The animations are very helpful in visualizing what's actually going on.

[coreyzamprogno]

Good to see you're coming back with some content! We've missed ya

[harunjonuzi]

This channel is a literal gem, I know it might take alot of time to produce quality content like this, but in the long run it will be worth it, keep up the good work, we are in love with the channel!

[ImAFriendlyMushroom]

i’m so glad that you’re posting videos again!!! your channel has been so helpful during my coding journey and i’ve missed seeing you! thank you for all that you do, your efforts are so appreciated ❤

[Alejandro]

It's great to see you again, you been away for a long time, hope your channel growts as it deservs.

[TravieTrav]

this video came out right on time. was just struggling with this last night!

[janiskarasa]

This is very valuable content. I liked the one with images and white space underneath them.
Next one could be about overflow, -x, -y for images and elements that are sticking out the viewports.
Thank you! 🙏

[farzadbahadorifar]

another awesom video, in this short time, I really happy you start making these awesome videos and share it more and more, thanks a lot.

[pranavgoel]

I wasn't aware about display: flow-root, I use padding generally. There are a lot of things in CSS phew. hahaha
This was insightful. 🤗

[ridir]

Margin-Collapse is some next Level CSS-Vodoo-Magic and the reason why our boss told us to avoid using margin. Thank you for demystifying such behavior.

[lachesis]

I love your content, and i don't want you to stop creating.

[francoortegadev]

I don't think that I've come across this issue yet, and I still don't quite understand why the collapsing margin created whitespace, but I do appreciate the tips in case I do encounter this in the future. Also, I did see video about the whitespace issue with images, and that explanation did click for me.

[wunkie]

im trying to understand how in the beginning you say adding the margin-top in the second element to try and add space between the first and second element while maintaining the background colors touching. i get why it adds the white part but im not understanding how it correlates to the phenomenon of margin collapse? wouldn't it just be you are using the wrong property for the current problem and having nothing to do with margin collapse because there is no margin being applied to the first element to even have margin collapse phenomenon from happening between first and second element? sorry i just want to know if this is a mistake or if this is true that this is in fact margin collapse.

[moroccoheaventours]

Hi please I have a problem in my website not mobile friendly in google I need your help if it possible many thinks