不同的行高和字體大小導致內嵌塊元素中的間隙

我在一起放置了一個簡單的導航欄。起初，我只是想所有垂直居中的聯繫，所以我用了下面的CSS，是說我需要的東西：不同的行高和字體大小導致內嵌塊元素中的間隙

.link { 
    display: inline-block; 
    line-height: 3em; 
    height: 3em; 
}

我當時就想我的一些環節是在一個較大的字體大小。我這樣做的每一個元素上設置不同的行高和字體大小屬性，但我確信，該行高度將作爲3EM各自父計算：

.link1 { 
    display: inline-block; 
    font-size: 1.5em; 
    line-height: 2em; 
} 
.link2 { 
    display: inline-block; 
    font-size: 2em; 
    line-height: 1.5em; 
}

在這一過程中，我注意到在元素垂直偏移的元素的上方和下方都有小帶。

我創建了一個JSFiddle here來演示這個問題。我懷疑我可以用float：left和clearfix來解決這個問題，但我想聽到解決它的「正確」方法。總結一下，我試圖在這裏實現的是具有相同高度但不同字體大小的div，並且文本垂直居中。

非常感謝您的幫助。

來源

2014-10-07 anthony.martin

將'vertical-align：middle;'添加到'.type' - http://jsfiddle.net/p8hn6oq0/ – Anonymous 2014-10-07 13:28:27

@MaryMelody謝謝！你（或任何人）是否會介意給我一個簡單的解釋，說明爲什麼解決這個問題？ – 2014-10-07 13:36:38

跨度的line-height是相等的，但默認情況下它們垂直對齊文本的基線。由於文本在跨度中垂直居中，因此較小文本的基線在跨度中較高。因此，當基線對齊時，較小字體跨度的頂部低於其他跨度的頂部。

您可以垂直居中使用vertical-align: middle（或top或bottom，基本上不是默認baseline任何其他），如果你不介意你的文字實際上是被垂直居中的跨度。這可以讓你找到你想要的東西，儘管看起來小的文本有點「浮動」，因爲基線不再對齊。

（另請注意，height屬性對跨度沒有影響）。

來源

2014-10-07 13:37:38 CupawnTae

非常清楚地解釋導致問題的原因以及如何解決問題。 – 2014-10-07 13:59:08

不同的行高和字體大小導致內嵌塊元素中的間隙

回答

相關問題