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.

body {
  margin: 0px;
}
div.content {
  text-align: center;
  margin-top: 35px;
  border-style: solid;
}
h1 {
  display: inline-block;
  margin: auto;
  font-family: Lane;
  color: white;
  font-size: 80px;
}
div#intro {
  background: blue;
  height: 100%;
  width: 100%;
}
<div id=intro>
  <div class=content>
  <h1>Text</h1>
  </div>
</div>

solution

This is occurring because the vertical margins are collapsing.

Box Model 8.3.1 Collapsing margins

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 overflow other than 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 auto/hidden would work:

body {
  margin: 0px;
}
div#intro {
  background: blue;
  height: 100%;
  width: 100%;
  overflow: auto;
}
div.content {
  text-align: center;
  margin-top: 35px;
  border-style: solid;
}
h1 {
  display: inline-block;
  margin: auto;
  font-family: Lane;
  color: white;
  font-size: 80px;
}
<div id=intro>
  <div class=content>
  <h1>Text</h1>
  </div>
</div>