Question

＆＃13;

* {
  margin: 0;
  padding: 0;
}

div {
  line-height: 30px;
}

a {
  font-size: 12px;
}

＆＃13;

<div>
  <a href="">测试</a>
</div>

＆＃13;

我认为内容高度与line-height相同，即30px。但实际上在Chrome中，它是32px。那是为什么？

Answer 1

因为<a />拥有自己的行高，大于1.0。

在CSS中添加此行：

a {
    /* current styles */
    line-height: 1;
}

Answer 2

因为line-height取决于font-size 选中jsfiddle我刚刚更改了font-size，高度为30px

vertical-align: middle;也需要<a>，所以顶部和底部的空格相等