直线高度从顶部移动形容词div

Question

为什么<div>的线高-“第二”通过从顶部移动影响div“1”？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将不会相对于其同级块获得高度。

参见此小提琴

​

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在直线高度上没有变化，并且仍然想让它停留在顶部，只需将这两种解决方案结合起来：小提琴。

​

​

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>

​