线高从顶部移动到div附近

Question

为什么选择<div> - ＆＃34;第二＆＃34;影响div＆＃34;一个＆＃34;从顶部移动？ jsfiddle.net

<a href="#" class="one">vienas</a>
<a href="#" class="two">du</a>

CSS：

a {
display: inline-block;
}

a.one {
height:3em;
border: 1px solid black;
}

a.two {
line-height:3em;
border: 1px solid black;
enter code here
}

结果：

Answer 1

因为它们是内联块和兄弟姐妹。 解决方案可能是，将内联块属性应用于第二个div，因此第一个div不会相对于其兄弟块获得高度。

请参阅此Fiddle

a.two {
    display: inline-block;
   
}

a.one {
    height:3em;
    border: 1px solid black;
}

a.two {
    line-height:5em;
    border: 1px solid black;
}

<a href="#" class="one">vienas</a>
<a href="#" class="two">du</a>

---

或如果你仍然可以提高身高，只想向上移动第一个div，你可以设置vertical-align:top为锚

a {
  display: inline-block;
  vertical-align: top;
}
a.one {
  height: 3em;
  border: 1px solid black;
}
a.two {
  line-height: 5em;
  border: 1px solid black;
}

<a href="#" class="one">vienas</a>
<a href="#" class="two">du</a>

<小时/> 或如果您希望元素div.one没有更改行高并仍然希望让它停留在顶部，只需将两个解决方案结合起来：Fiddle

a.two {
  display: inline-block;
  vertical-align: top;
}
a.one {
  height: 3em;
  border: 1px solid black;
}
a.two {
  line-height: 5em;
  border: 1px solid black;
}

<a href="#" class="one">vienas</a>
<a href="#" class="two">du</a>