Why Does The Margin From An Inline-Block Element Affect A Sibling Inline-Block Element

Question

I can't figure out why the margin-top of the <nav> element ( which comes after the <hgroup> element ) affects the margin-top or the placement of the <hgroup> . By adding a top margin to the <nav> element, the <hgroup> element also moves down as if it also has a top-margin applied to it

heading {
  position: relative;
  display: inline-block;
  border: 1px solid #333;
}

heading hgroup {
  display: inline-block;
  font-family: "Avenir";
  font-size: 5em;
  border: 1px solid yellow;
}

nav {
  position: relative;
  display: inline-block;
  margin: 500px 0 0 -1.618em;
  border: 1px solid red;
}

<heading>
  <hgroup>
    <h1>NERD</h1>
    <h1>CO.</h1>
  </hgroup>
  <nav>
    <ul>
      <li><a href="#">articles</a></li>
      <li><a href="#">podcast</a></li>
      <li><a href="#">social</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</heading>

Answer 1

The inline-block element behaves like an inline element in that it will be subject to positioning attributes such as line-height and vertical-align. Once you increase the margin-top of nav past 500px or so, the height of the line is larger than the height of the hgroup. The default vertical-align of baseline pushes hgroup down. In other words, the elements are positioned according to the inline flow.

Please note, in the snippet below, that when I set vertical-align to top than the hgroup is placed at the top of the line.

heading {
  position: relative;
  display: inline-block;
  border: 1px solid #333;
}

heading hgroup {
  display: inline-block;
  font-family: "Avenir";
  font-size: 5em;
  border: 1px solid yellow;
  vertical-align: top;
}

nav {
  position: relative;
  display: inline-block;
  margin: 550px 0 0 -1.618em;
  border: 1px solid red;
}

<heading>
  <hgroup>
    <h1>NERD</h1>
    <h1>CO.</h1>
  </hgroup>
  <nav>
    <ul>
      <li><a href="#">articles</a></li>
      <li><a href="#">podcast</a></li>
      <li><a href="#">social</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</heading>