CSS：爲什麼減少相鄰內聯元素的字體大小會增加總體領先？

Question

我有一個元素包含兩個span標籤，每個標籤都包含一些文本。容器元素設置字體大小，然後將第二個span標籤上的字體大小設置爲較小的大小。當第二個跨度縮小字體大小時，行與下一個塊元素之間的間距增加。這發生在WebKit和Gecko中。

的p容器元件具有{ margin-bottom: 0; padding-bottom: 10px; }及其以下兄弟具有{ margin-top: -5px; }

下面的圖像示出了這種情況，並且包含在螢火文檔結構的相關部分的快照。

爲什麼是p標籤減小第二跨度標籤的字體尺寸後增加下面的間隔？

Answer 1

我的猜測是你有一個（相對）較大的行高被該小數點跨度（可能是32px？）繼承，並且當你將字體大小降低到18px時，會出現這樣的情況：十進制字形與非十進制字形相匹配，但行必須佔用完整的指定行高。因此，在基線以下添加額外空間。

添加的line-height規則，我敢打賭，這就會消失：

.box .value > .decimal { line-height: 18px; }