What is the point of CSS collapsing margins?

by

The general meaning of “margin” isn’t to convey “move this over by 10px” but rather, “there must be 10px of empty space beside this element.”

I’ve always found this is easiest to conceptualize with paragraphs.

If you just gave paragraphs margin-top: 10px and had no margins on any other elements, a series of paragraphs would be spaced beautifully. But of course, you’d run into trouble when placing another element underneath a paragraph. The two would touch.

If margins didn’t collapse, you’d hesitate to add margin-bottom: 10px to your previous code, because then any pair of paragraphs would get spaced 20px apart, while paragraphs would separate from other elements by only 10px.

So vertical margins collapse. By adding top and bottom margins of 10px you’re saying, “I don’t care what margin rules any other elements have. I demand at least 10px of padding above and below each of my paragraphs.”

More Related Contents:

  1. Why are margin/padding percentages in CSS always calculated against width?
  2. In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
  3. Padding for Inline Elements
  4. Is it wrong to change a block element to inline with CSS if it contains another block element?
  5. Is quoting the value of url() really necessary?
  6. Why are CSS named grid areas not in quotes?
  7. Invalid CSS selector causes rule to be dropped: What is the rationale?
  8. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  9. Fallback for CSS attributes without unit
  10. Can we use any other TAG inside along with ? [duplicate]
  11. Can a CSS pixel be a fraction?
  12. What does font-size really correspond to?
  13. When to use line breaks vs CSS positioning?
  14. Using cm/mm on the CSS of a web app that replicates paper interaction is a good practice?
  15. jQuery .animate function not responding properly
  16. What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS
  17. How to use CSS to surround a number with a circle?
  18. Make an image responsive – the simplest way [duplicate]
  19. CSS Animations with delay for each child element
  20. Borders disappear in Chrome when I zoom in
  21. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  22. CSS – relative positioned parent div not stretching to absolute child div height
  23. How does the z-index property really work?
  24. Linking to CSS in an SVG embedded by an IMG tag
  25. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  26. Div side by side without float
  27. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  28. How to use variable in CSS? [duplicate]
  29. Which type of quotes we should use in css background url (“….”)? Single, double or no quote needed? [duplicate]
  30. Latest on CSS parent selector [duplicate]

Leave a Comment