我不明白为什么margin-top of the <nav>元素（位于<hgroup>元素）影响margin-top或放置<hgroup>。通过添加上边距<nav>元素，即<hgroup>元素也会向下移动，就好像它也有一个top-margin应用于它
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>
The inline-block元素的行为就像inline元素，因为它将受到定位属性的影响，例如line-height and vertical-align。一旦你增加了margin-top of nav past 500px左右，线的高度大于线的高度hgroup。默认vertical-align of baseline pushes hgroup向下。换句话说，元素根据内联流定位。
请注意，在下面的代码片段中，当我设置vertical-align to top比hgroup位于该行的顶部。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
