Vertical margins within a nested divs aren’t working as expected
Why is the margin on the content div pushing down the intro div as well? I feel like I made a really silly mistake when nesting the divs, but I really have no idea.
This is occurring because the vertical 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.
Take a look at the relevant spec to see the rules that apply for all the possible workarounds.
For instance, one rule is:
Margins of elements that establish new block formatting contexts (such as floats and elements with
visible) do not collapse with their in-flow children.
Therefore, in your case, you can simply change the
overflow property on the
#intro element to something other than the default value of
visible. Values such as
hidden would work: