为什么箱高度比线高

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    line-height: 30px; 
 
} 
 

 
a { 
 
    font-size: 12px; 
 
}

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

更大，我相信内容的高度是一样的line-height这是30px。但实际上在Chrome中，它是32px。这是为什么？

2016-08-17 a86356

请选择一个正确的答案，如果任何答案帮助你解决了这个问题，所以其他人不必为此继续尝试这个 –

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

在CSS中添加此行：

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

2016-08-17 13:28:37

没关系。但是我遇到了另外一个问题，看起来这个单词的空间顶部比空格还要大一点？为什么？ – a86356

这可能取决于字体如何设计或浏览器呈现。它也让我有时也感到恶心，但对我来说并不重要:) –

你可以使用vertical-align：middle;检查我的答案 –

因为line-height依赖于font-size 入住这jsfiddle我只是改变了font-size，高度为30px

还需要vertical-align: middle;为<a>这样的空间从上到下都是等于

2016-08-17 13:36:23

回答