CSS margin-top of affects parent’s margin

by

Thank you all for your answers, @gaurav5430 posted a link with a very precise definition that I would like to summarize into this answer. As of why they decided that this elements should behave like this it is still unclear for me; but at least we were able to find a rule that applies to collapsing margins:

“In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero

Basically in our example on the original question, the biggest margin-top is the one of the <h1> therefore taken and applied to the parent <div>.

This rule is cancelled for:

  • 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

That is the reason why overflow:hidden solved the issue.

Thanks @gaurav5430; here is the reference: http://reference.sitepoint.com/css/collapsingmargins

Also thanks to @Adrift that posted very good resources, although I found @gaurav5430’s answer more straight forward and easier to understand.

More Related Contents:

  1. When to use margin vs padding in CSS [closed]
  2. How to disable margin-collapsing?
  3. Margin on child element moves parent element
  4. CSS Margin Collapsing
  5. Margin-Top not working for span element?
  6. How do I uncollapse a margin? [duplicate]
  7. What does auto do in margin: 0 auto?
  8. CSS: Margin-top when parent’s got no border
  9. How can I remove space (margin) above HTML header?
  10. How do I center an SVG in a div?
  11. html, css – weird invisible margin below pictures
  12. Set position absolute and margin
  13. Remove “whitespace” between div element
  14. Remove all padding and margin table HTML and CSS
  15. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  16. What is the difference between `margin` and `padding` in CSS?
  17. How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?
  18. Why were margin collapse rules introduced in CSS?
  19. CSS: clean solution to the margin collapse issue when floating an element
  20. Excessive Spaces Between Words [closed]
  21. Fill in text in HTML5
  22. Semi-transparent color layer over background-image?
  23. Transparent hollow or cut out circle
  24. Does CSS have a :blur selector (pseudo-class)?
  25. Bootstrap icons are loaded locally but not when online
  26. CSS Justify text, fill space with dots [duplicate]
  27. How to make an inline-block element fill the remainder of the line?
  28. What does a `~` tilde in a CSS `url()` do?
  29. placing background image in a rhombus shaped container is causing the container to lose its shape
  30. SASS CSS: Target Parent Class from Child

Leave a Comment