为什么内联块元素的边距会影响同级内联块元素

本文介绍了为什么内联块元素的边距会影响同级内联块元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我不知道为什么< 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>