Why are my div margins overlapping and how can I fix it?

by

I think it’s a collapsed margin.
Only the largest margin between the bottom of the first element and the top of the second is taken into account.

It is quite normal to don’t have too much space between two paragraphs eg.

You cannot avoid that with two adjacent elements so you have to enlarge or reduce the larger margin.

EDIT: cf. W3C

Two margins are adjoining if and only if:

  • both belong to in-flow block-level boxes that participate in the same block formatting context
  • no line boxes, no clearance, no padding and no border separate them
  • both belong to vertically-adjacent box edges

So there is no collapsing with float which takes the element out of the flow.

More Related Contents:

  1. CSS margin pushing the body element
  2. why i can’t save scss file of template?
  3. Odoo 10 POS Android Webview not showing properly
  4. Grid of responsive squares
  5. Setting the width of inline elements
  6. Floated elements of variable height push siblings down
  7. Alternate table row color using CSS?
  8. How to prevent column break within an element?
  9. How can I wrap text around a bottom-right div?
  10. Using tags in the with other HTML
  11. How to fallback to local stylesheet (not script) if CDN fails
  12. Embed image in a element
  13. Using CSS :before and :after pseudo-elements with inline CSS?
  14. Make a div fill up the remaining width
  15. How to make fill height
  16. Highlight label if checkbox is checked
  17. Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM [closed]
  18. White space at top of page
  19. How to apply two CSS classes to a single element
  20. Why does percentage padding break my flex item?
  21. How does the vertical-align property work?
  22. How to show multiline text in a table cell
  23. Why does flexbox stretch my image rather than retaining aspect ratio?
  24. Line height issue with inline-block elements
  25. Avoiding repeated constants in CSS
  26. display background color for the page & align texts at center
  27. Manipulating external svg file style properties with CSS
  28. Why does CSS Grid layout add extra gaps between cells?
  29. Vertical align text in block element
  30. Aligning image to center inside a smaller div

Leave a Comment