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

I can't figure out why the margin-top of the

element ( which comes after the

element ) affects the margin-top or the placement of the

. By

Solution 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: 550px00 -1.618em;
  border: 1px solid red;
}

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