線高意外導致高度更高

在這個小提琴中，如果您檢查導航元素，您會看到nav元素的計算高度爲61px。我預計它是60px。爲什麼是61？線高意外導致高度更高

<body> 
    <nav> 
    <a>bkaksfd</a> 
    <a>kkwaekfwae</a> 
    </nav> 
</body>

對我來說，它顯示爲60px使用鉻 – Gnarlywhale

您應該添加在哪個瀏覽器（和操作系統）你看到這一點。 Chrome對我來說顯示60px，但Firefox顯示61px（在Win 10上）。 – selfthinker

在Mac上它是60px – Johannes

在NAV的高度是60像素

2016-10-11 21:51:09

導航中的高度究竟是什麼，你能解釋一下嗎？ –

與鉻F12檢查元素，你可以看到導航的寬度和高度，是60px，請參閱img attach –

線高度與排版和它定義的元件的最小高度。它不能確保元素的確切高度。渲染不同的字體也會改變高度。舉例來說，如果您使用襯線字體系列高度變爲61，而使用無襯線字體系列的高度變爲60.您需要使用height屬性來確保確切的高度。

2016-10-11 21:55:39

根據評論，你可以看到即使瀏覽器和操作系統之間渲染也不同。 –

這將意味着行高是做單行文本垂直對齊的不好方法 – allenylzhou

line-height定義了從一行的頂部到另一行的頂部的空間量。但是，由於默認的vertical-align: baseline，第一行文本的頂部不與父元素的頂部對齊。額外的空間會導致計算高度的差異。

這可以通過將vertical-align設置爲top或bottom來解決。

2016-10-12 00:24:43 darrylyeo

回答