Question

我无法弄清楚为什么margin-top元素的<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; }一样

＆＃13;

<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>

＆＃13;

CRUD Service

＆＃13;

Answer 1

inline-block元素的行为类似于inline元素，因为它会受line-height和vertical-align等定位属性的影响。将margin-top的{{1}}增加到nav左右后，该行的高度将大于500px的高度。 hgroup的默认vertical-align推送baseline。换句话说，元素根据内联流定位。

请注意，在下面的代码段中，我将hgroup设置为vertical-align而top放置在该行的顶部。

＆＃13;

hgroup

＆＃13;

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;
}

＆＃13;

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

1 个答案: