我不知道为什么< nav> 元素(在< hgroup> element)影响 margin-top 或< hgroup> 的位置.通过向< nav> 元素添加顶部边距,< hgroup> 元素也向下移动,就好像它也具有 top-margin
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> 推荐答案
inline-block 元素的行为类似于 inline 元素,因为它将受到定位属性的影响例如 line-height 和 vertical-align .一旦将 nav 的 margin-top 增加到 500px 左右,则行的高度大于的高度hgroup .默认的 vertical-align 为 baseline ,将 hgroup 向下推.换句话说,这些元素是根据内联流进行定位的.
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.
请注意,在下面的代码段中,当我将 vertical-align 设置为 top 时,将 hgroup 放在顶部线.
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>
更多推荐
为什么内联块元素的边距会影响同级内联块元素
发布评论