为什么内联块元素的边距会影响同级内联块元素 [英] Why Does The Margin From An Inline-Block Element Affect A Sibling Inline-Block Element

问题描述

我不知道为什么< nav> 元素(在< hgroup> margin-top > 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>

这篇关于为什么内联块元素的边距会影响同级内联块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！