How to disable margin-collapsing?

by

There are two main types of margin collapse:

  • Collapsing margins between adjacent elements
  • Collapsing margins between parent and child elements

Using a padding or border will prevent collapse only in the latter case. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse. Thus, both overflow: auto and overflow: hidden will have the same effect. Perhaps the only difference when using hidden is the unintended consequence of hiding content if the parent has a fixed height.

Other properties that, once applied to the parent, can help fix this behaviour are:

  • float: left / right
  • position: absolute
  • display: inline-block / flex

You can test all of them here: http://jsfiddle.net/XB9wX/1/.

I should add that, as usual, Internet Explorer is the exception. More specifically, in IE 7 margins do not collapse when some kind of layout is specified for the parent element, such as width.

Sources: Sitepoint’s article Collapsing Margins

More Related Contents:

  1. How do I uncollapse a margin? [duplicate]
  2. CSS: Margin-top when parent’s got no border
  3. When to use margin vs padding in CSS [closed]
  4. Margin on child element moves parent element
  5. Change bootstrap navbar collapse breakpoint without using LESS
  6. CSS Margin Collapsing
  7. Margin-Top not working for span element?
  8. What does auto do in margin: 0 auto?
  9. Bootstrap 3 – disable navbar collapse
  10. How can I remove space (margin) above HTML header?
  11. How do I center an SVG in a div?
  12. html, css – weird invisible margin below pictures
  13. CSS margin-top of affects parent’s margin
  14. Set position absolute and margin
  15. Remove “whitespace” between div element
  16. Remove all padding and margin table HTML and CSS
  17. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  18. What is the difference between `margin` and `padding` in CSS?
  19. How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?
  20. Why were margin collapse rules introduced in CSS?
  21. CSS: clean solution to the margin collapse issue when floating an element
  22. Prevent content from expanding grid items
  23. How to dynamically add a class to manual class names?
  24. CSS animation delay in repeating
  25. Wave (or shape?) with border on CSS3
  26. How to style icon color, size, and shadow of FontAwesome Icons
  27. How do I extend a class/mixin which has dynamically formed selector
  28. Reuse CSS animation in reversed direction (by resetting the state?)
  29. Clip/Crop background-image with CSS
  30. Why doesn’t my child element inherit color from its parent when parent has more specific selector?

Leave a Comment