6

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>
ivvi
  • 5,120
  • 5
  • 36
  • 53

3 Answers3

7

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.
sandeep
  • 91,313
  • 23
  • 137
  • 155
  • I see that this list is from the link you included, but there are some terms I don't understand. What is 'in-flow'? I'm also confused by the different block-terminology. – ivvi Mar 16 '12 at 15:22
  • @seron in-flow just means, that there is no positioning or floating. They are just some ordinary siblings next to each other – yunzen Mar 16 '12 at 15:54
  • Thanks for explaining in-flow. I think my example is behaving according to rule number 2. – ivvi Mar 16 '12 at 16:04
4

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

yunzen
  • 32,854
  • 11
  • 73
  • 106
  • Is this a side effect of overflow:hidden? Or does it actually stop margins from touching, and if so how? I'm not sure how to express what I'm trying to ask. I mean does non-collapsing happen as by some rule, perhaps one of the below listed by sandeep, or are margins actually not touching and how is that accomplished in that case. – ivvi Mar 16 '12 at 15:14
  • btw, that link was quite helpful. – ivvi Mar 16 '12 at 15:25
1

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.

Roderick Obrist
  • 3,688
  • 1
  • 16
  • 17