Vertical margins disappear when parent is set to overflow:visible

Question

Why do vertical margins disappear when the parent is set to overflow:visible? If it's set to overflow:hidden margins are visible again. It seems counterintuitive.

I think I understand how overflow is supposed to work when content of an element can't fit into it, but I don't understand what is happening with the margins.

Here's an example: ( http://jsfiddle.net/VrVc7/ )

#outer {
    background-color:#EEE;
    overflow:hidden;
}

#inner {
    margin: 30px;
    padding: 5px;
    background-color:#ABE;
}

<div id="outer">
    <div id="inner">abc</div>
</div>

Answer 1

It's because of collapsing margins:

If you have overflow: hidden, the margins of the inner div remain inside the outer div.
If you have overflow: visible, the top and bottom margins collpase with the zero margins of the outer div, because they touch each other. This is then recalculated to have the same as the inner margin.

So, overflow: hidden will break collapsing margins with the ones inside. You could break the margin collapsing by giving the outer div a padding or a border. So they won't touch each other and so no collapsing

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

Answer 2

It's called collapsing margin. As per W3c

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

How to prevent from collapsing margin.

1. Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
2. Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
3. Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
4. Margins of inline-block boxes do not collapse (not even with their in-flow children).
5. The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
6. The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
7. The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.
8. A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.

Answer 3

I know that this is what it looks like. But whats really happening here is called margin collapsing. Most of the time if the parent has a margin, or if two siblings have a margin then the over lap eachother. Imagine you have a div with three children:

|--|
|[]|
|[]|
|[]|
|--|

If you put a margin of 10 on the children. There will be a total of 10 vertical spacing between each of the children, even though you would expect there to be 20. This is because if the margins are shared they collapse into eachother.

Either way google it, that will explain it better than I ever could.