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 are some of the ways to avoid margin collapsing between parent-child elements. Use the one that fits better with the rest of your styling:

• Set display to other than block.
• Set float to other than none.
• Remove the margin, and use instead padding. For example if you had margin-top: 10px, replace with padding-top: 10px;.
• Remove the margin, and use instead position (absolute or relative) with attributes top, bottom, etc. For example if you had margin-top: 10px, replace with position: relative; top: 10px;.
• Add a padding or a border in the side where the margins are collapsing, to the parent element. The border can be 1px and transparent.
• Set overflow to other than visible to the parent element.