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