Question

我对以下CSS的行为感到困惑，也说明了in this fiddle。

<style type="text/css">
p {
    font-size: 14px;
}

.percentage {
    line-height: 150%;
}

.em-and-a-half {
    line-height: 1.5em;
}

.decimal {
    line-height: 1.5;
}

.smaller {
    font-size:50%;
}

.caption {
    font-weight: bolder;
    font-size: 80%;
}

</style>

<p class="caption">default line spacing</p>

<p>This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p>This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 150%</p>

<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 1.5em</p>

<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 1.5</p>

<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

前两段有默认行间距。第二段有一个更小的词。但它不会影响该段中的行间距。不应该，但那么 -

接下来的两段有line-height: 150%。同样，第二段有一个更小的词。但这一次，由于原因尚不清楚，较小的字体会在前两行之间创造额外的空间（至少在Safari，Chrome，Firefox和Explorer中）。这是我试图解决的CSS中的原始问题。（我推测这与浏览器缩小单词然后垂直向下移动以重新调整基线有关。）

接下来的两段有line-height: 1.5em。我的理解是1.5em与150%相同。事实上，行为是相同的：第二段的前两行之间有额外的空间。

但是在这里它变得奇怪：接下来的两段都有line-height: 1.5 - 没有指定单位。这一次，额外空间问题消失了。

总而言之，当父母和父母的行高时，CSS似乎给出了一致的行间距结果。孩子是不同的（通过无单位值的继承）但是当父母和父母的行高时不一致的结果。孩子是一样的。

因此我的问题：

我知道1.5和150%或其同义词1.5em之间存在故意的语义差异in the CSS spec。（即：将无单位值传递给子元素，并使用子的字体大小计算其行高，而百分比或em值将导致为父级计算行高，然后计算价值被传递给孩子。）但是，这如何解释这里看到的行为差异？额外空间来自哪里？如果它是某些CSS定位规则的结果，那么该规则是什么？
或者，如果这些示例都应该以相同的方式呈现，那么哪一个实现不正确？（关于Q2的注意事项：渲染怪癖在不同浏览器中以相同方式发生的事实强烈表明它们都没有被错误地实现，这将带你回到问题（1）。）
~~实际上，切换到1.5的{{1}}之类的无单位测量是否有不足之处？~~（答案：否）

Answer 1

修改

我已经为demonstrate the leading that is created using the different values创建了一个codepen。希望这提供了更好的解释。

我可以回答你的问题，但只是理论（此时）关于你所看到的额外间距（并提供潜在的解决方案）。

您的问题

CSS中有意识的语义差异在1.5到150％之间是否存在行为差异？

实际上有！

数值因子（本例中为1.5）继承并用于计算每个后代的行高，相对于其字体大小。

百分比因子（150％）用于根据父元素的font-size计算行高。然后，生成的预先计算的值由其后代继承。

或者，如果它们是相同的，那么哪一个实现不正确？

他们故意不同。（见W3C spec）

实际上，切换到原始小数（如行高为1.5）会有不利之处吗？

通常，使用小数值是有利的，因为继承的行高会更好地适应。但有些情况下它不适合您的需求。

额外间距问题

我注意到如果我将小文本vertical-align设置为middle或bottom，问题就不会发生。但这不是一个很好的解决方案。

我猜测这与小文本使用继承的计算行高度以及它在行上的位置这一事实有关。由于文本较小且位置较低，但与周围线的线高相同，因此下半部分实际上会向下推进，而上半部分也不会达到周围文本的高度。

因此，假设基本字体大小为16px，行高为24px。两边的领先优势是4px（（24-16）/ 2）。当font-size为50％时，即8px，但行高保持24px。因此，领先者在任何一方都变为8px（（24-8）/ 2）。

文本的基线将对齐，因此在所有条件相同的情况下，您会希望较小的文本比正常文本延伸4px。但由于文本（及其相应的内容区域）较小，因此下半部分开始向后移动，这就是为什么您只看到一个或两个像素的变化，并且只有一定的百分比（随着您变小而变得越来越多 - 尝试它出）

我真的应该使用这个图像，但现在不能......也许我可以稍后添加一些。

我不知道这是否有帮助，但我现在对line-height的工作方式有了更好的了解！

参考文献： http://www.w3.org/wiki/CSS/Properties/line-height http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ http://www.maxdesign.com.au/articles/css-line-height/

Answer 2

似乎您的问题的简单答案是：继承。示例中的line-height: 150%和line-height: 1.5em会继承其父级的计算机值，而数值则不会。

在您的示例中，父<p>的行高为21px，如果使用百分比或ems指定嵌套元素<span class="small">的行高，则将根据继承的计算得出价值21px; 21 * 1.5 = 31.5，但如果你使用行高的数值，它将根据实际的字体大小计算; （14 * 0.5）* 1.5 = 10.5。

您对here的问题有完美的答案。

Answer 3

Matthew，尝试将“line-height：1.5em;”添加到“.smaller”类中。它是否解决了所有声明的问题？

我认为如果是这样，它必须是一个继承问题。 1.5em / 150％和1.5（没有任何单位）之间的差异是前两个计算值并将其设置在其元素的绝对事物中，因此没有自己的行高度声明的该元素的子元素将继承计算值，而不是百分比。

然而，声明没有单位的行高对于该子元素有不同的结果，因为实际继承的是该数字（在您的情况下为1,5），将在子元素上再次计算与其自身的字体大小相关的值，而不是与其父级相关的值。

你说规范以相同的方式定义所有版本，所以结果应该是相同的，但这是实际说的：

<number>

属性的使用值是此数字乘以元素的字体大小。负值是非法的。 计算值与指定值相同。

<percentage>

属性的计算值是此百分比乘以元素的计算字体大小。负值是非法的。

这就是区别：实际计算的是什么。当您将线宽声明为百分比（或使用ems）时，计算出的值是结果numerica值，而在无单位声明的情况下，计算值与声明的值相同，这使得要重新计算的子元素。

与此同时，我已经完成了测试，我认为我是对的。

当您将行高声明为百分比（或使用ems）时，计算值将由span元素继承。所以span元素的行高将是24px而不是13.5px。但是，由于span元素的字体大小实际上更小，因此下面的前导结果将大于其父元素。（24像素-9px）/2=7.5px。所以你将获得7.5px领先而不是（24-16）/ 2（4px）。你最终得到额外的7.5px-4px（3.5px）领先。

为什么无单位行高在此示例中的行为与百分比或em不同？

3 个答案:

修改

您的问题

额外间距问题