Nested div with margin top set causes scrollbar to appear
Let’s say I have this small HTML snippet:
I also have these styles defined:
With this setup, scroll bars appears with the
Why does the nested inner div causes this scrollbar to appears?
I can remove the scrollbar by removing the
margin-top rule, but this would cause side effects.
Here is a jsfiddle that reproduces the issue: http://jsfiddle.net/stevebeauge/PTA85/
 : my actual issue is solved by replacing
padding-top, but I’m looking for an explanation, not only the solution.
This is occurring because the margins are collapsing.
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.
When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins’ widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.
Replace the margin with padding (example).
Change the display of
For additional information see The visual formatting model - Block formatting contexts.