Margin-Top push outer div down

Question

I have a header div as the first element in my wrapper div, but when I add a top margin to a h1 inside the header div it pushes the entire header div down. I realize this ha

Answer 1

This happens because of margin collapse. When child element touches the boundary of parent element and any of them applied with margins then :

1. The margin which is largest will win (applied).

2. if any of them having margin then both will share the same.

Solutions

1. apply border to parent which makes parent and child separates.
2. apply padding to parent which makes parent and child separates.
3. apply overflow rather than visible on parent.
4. use before or after to create virtual element in parent div which can differ margin applied child and parent.
5. create one html element between margin applied child and parent can also separates them .