Why were margin collapse rules introduced in CSS?

by

This is one of the situations where it doesn’t really make sense until you realise that the alternatives make less sense.

As you probably know, margins specify the distance between elements, it’s not an “outer padding” that surrounds each element. If two elements with the margin 20px are next to each other, the distance between them is 20px, not 40px.

As the margin is a distance to another element, it makes sense that the distance is from the element to the surrounding elements, not to the boundary of the parent element.

If the margin would be counted to the boundary of the parent element, putting elements in a div element would introduce extra spacing between the elements eventhough the div itself has no margin or padding. The margins around an element should remain the same if you add an unstyled div around it.

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. CSS margin-top of affects parent’s margin
  13. Set position absolute and margin
  14. Remove “whitespace” between div element
  15. Remove all padding and margin table HTML and CSS
  16. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  17. What is the difference between `margin` and `padding` in CSS?
  18. How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?
  19. CSS: clean solution to the margin collapse issue when floating an element
  20. Is there a way to break a list into columns?
  21. What does an asterisk do in a CSS property name? [duplicate]
  22. Image Greyscale with CSS & re-color on mouse-over?
  23. Right to left Text HTML input
  24. complete styles for cross browser CSS zoom
  25. How to make radial gradients work in Safari?
  26. SVG Fill not being applied in FireFox
  27. Label on the left side instead above an input field
  28. How can I invert color using CSS?
  29. Display property differences for inline-*something*
  30. Why does enabling hardware-acceleration in CSS3 slow down performance?

Leave a Comment