CSS Margin Collapsing

by

No. When you have two adjacent vertical margins, the greater of the two is used and the other is ignored.

So, for instance, if you have two block-display elements, A, followed by B beneath it, and A has a bottom-margin of 3em, while B has a top-margin of 2em, then the distance between them will be 3em.

If you set a border or padding, this prevents the collapsing from occurring. In the above example, the distance between the two elements will then be 5em.

If you don’t set any margins, then there won’t be any margins to collapse. It has nothing whatsoever to do with the element type in use – it is applicable to all element types, not just <div> elements.

Read the CSS 2.1 specification for more details.

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. Margin-Top not working for span element?
  5. How do I uncollapse a margin? [duplicate]
  6. What does auto do in margin: 0 auto?
  7. CSS: Margin-top when parent’s got no border
  8. How can I remove space (margin) above HTML header?
  9. How do I center an SVG in a div?
  10. html, css – weird invisible margin below pictures
  11. CSS margin-top of affects parent’s margin
  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. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  21. Padding for Inline Elements
  22. How can I create a “tooltip tail” using pure CSS?
  23. Why doesn’t [CSS feature] work in [browser] but works in others?
  24. CSS selector to get deepest element of specific class in the HTML tree
  25. Force Non-Monospace Font into Fixed Width Using CSS
  26. Tools to make CSS sprites? [closed]
  27. How to write a caption under an image?
  28. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  29. CSS transition fade in
  30. How to change Bootstrap navbar collapse breakpoint

Leave a Comment