爲什麼箱高度比線高

* { 
 
    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

回答