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 .

Answer 2

display: flex will work in this case. Give parent element display: flex; and then give margin as per your requirement to the h1 tag.

Answer 3

I don't have a solid explanation on why this happens, but I've fixed this by changing the top-margin to top-padding, or adding display: inline-block to the element style.

EDIT: This is my theory

I have a feeling it has something to do with how margins are collapsed (combined).

from W3C Collapsing Margins:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

My theory is that since your first element is next to the body the two margins combine and are applied to the body: this forces the body's content to start below the applied collapsed margin in compliance with the box model.

There are situations where the margins do not collapse which might be worth playing around with (from Collapsing Margins):

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
* the root element

Answer 4

Adding a tiny bit of padding to the parent element top can fix this issue.

.parent{
  padding-top: 0.01em;
}

This is useful if you need an element inside the parent to be visible outside the parent element, like if you are creating an overlapping effect.

Answer 5

Run into this issue today.

overflow: hidden didn't worked as expected when I had more elements followed.

So I tried changing the parent div's display property and display: flex worked !!!

Hope this may help someone. :)

Answer 6

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.