Why collapsing margins

I find it quite annoying, being the source of many design bugs. I hope that by understanding the purpose of collapsing margins, I will understand when to use them and how to avoid them when they are not needed. 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. 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. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. What is the point of CSS collapsing margins? Ask Question. Asked 11 years, 4 months ago.

When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest most negative negative margin. When all margins are negative, the size of the collapsed margin is the smallest most negative margin. This applies to both adjacent elements and nested elements.

Recommendation Initial definition. CSS Key Concepts: CSS syntax , at-rule , comments , specificity and inheritance , the box , layout modes and visual formatting models , and margin collapsing , or the initial , computed , resolved , specified , used , and actual values. Finally, both the top and bottom margins on a single element may collapse if the element has a computed height of 0 , i. As with everything, there are a few exceptions to take note of for when margins will not collapse.

Collapsible margins only apply to block-level elements. These are elements that have either of the following values for the display property: block , list-item , or table. Therefore, flex items, grid items, absolutely positioned items, and other non-block-level elements do not apply.

In the example cases mentioned above, collapsing will not happen if there are line boxes, clearance, paddings, or borders, that stand between the two elements. If we add a border around the parent element, the margins no longer collapse.

This happens because the margin of the parent is no longer in direct contact with the margin of the child. Collapsible margins can be a pain if you don't properly understand when they occur.

The first step to dealing with or avoiding them is understand exactly which case of collapsible margins we are dealing with. The only way to counteract collapsible margins that occur this way is by inserting something between the elements, for example a border.