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

我对以下CSS的行为感到困惑,也在这个小提琴中说明.

default line spacing

This tutorial provides a brief introduction to the
programming language 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.

This tutorial provides a brief introduction to the
programming language 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.


line-height: 150%

This tutorial provides a brief introduction to the
programming language 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.

This tutorial provides a brief introduction to the
programming language 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.


line-height: 1.5em

This tutorial provides a brief introduction to the
programming language 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.

This tutorial provides a brief introduction to the
programming language 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.


line-height: 1.5

This tutorial provides a brief introduction to the
programming language 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.

This tutorial provides a brief introduction to the
programming language 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.

前两段具有默认行间距.第二段有一个更小的词.但它不会影响该段落中的行间距.不是它应该,但随后 -

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

接下来的两段有line-height: 1.5em.我的理解是1.5em和以前一样150%.事实上,行为是相同的:第二段的前两行之间有额外的空间.

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

总而言之,当父和子的行高不同(通过继承无单位值)时,CSS似乎给出一致的行间距结果,但是当父和子的行高相同时,结果不一致.

因此我的问题:

我知道CSS规范1.5和150%它的同义词之间存在故意的语义差异1.5em.(即:将无单位值传递给子元素,并使用子项的字体大小计算其行高,而百分比或em值将导致为父项计算行高,然后将该计算值传递给孩子.)但是,这如何解释这里看到的行为差异？额外空间来自哪里？如果它是一些CSS定位规则的结果,那么该规则是什么？

或者,如果这些示例都应以相同的方式呈现,那么哪一个实现不正确？(关于Q2的注意事项:渲染怪癖在不同浏览器中以相同方式发生的事实强烈暗示它们都没有被错误地实现,这将带你回到问题(1).)

在实际应用中,是有缺点切换到无量纲像测量1.5的line-height？(答案:不)

Matthew Butt.. 37

根据提出的答案中的线索,我认为在这些示例中看到的渲染行为是违反直觉的,但是正确的,并且由规范中的几个规则和整个CSS框模型的交互强制执行.

CSS通过公式line-height= L + AD 计算框所需的前导L ,其中AD是 字体的"从顶部到底部的距离".然后"领先的一半加在A之上,另一半加在D之下".因此,文本已经font-size:16px并且 line-height:24px将具有4px领先于上方和下方.文本,font-size:8px并且line-height:24px将具有8px的领先于上方和下方.

但是,默认情况下,"用户代理必须根据相关的基线对齐字形." .这开始解释这里发生了什么.当line-height以百分比或em指定时,子项继承计算值(此处为smallerspan).意思是,smaller跨度line-height与父块相同.但由于L + AD公式,该跨度的文本在顶部和底部具有更多的前导,因此基线在其框中位于更高的位置.浏览器smaller垂直向下推动跨度以匹配基线.

但随后浏览器出现了一个新问题 - 如何处理封闭块中的行间距,该行间隔已被此基线调整过程中断.规范也解决了这个问题: line-height块级元素"指定元素中线框的最小高度".意思是,CSS没有承诺你会得到你的确切 line-height,只是你会得到至少这个数量.因此,浏览器在封闭块中将线条分开,以便重新调整的子框适合.

这是反向性的原因在于它与大多数文字处理器和页面布局程序的工作方式相反.在这些程序中,段落中较小的文本段与其基线(如CSS)对齐,但行高度强制为基线之间的距离,而不是围绕较小文本的框.但这不是一个错误 - CSS是围绕一个盒子模型设计的.所以最后,我们可以说这种间距行为是该模型的结果.

这仍然让我们用无单位行高来解释示例中的行为:

首先,请注意,如果未line-height指定,则默认情况下浏览器将应用无单位行高.这是规范所要求的:line-heightis 的初始值normal,被定义为具有"与相同的含义",并且spec建议值"介于1.0和1.2之间".这与我们在上面的示例中看到的一致,其中line-height: 1.5 段落与没有行高设置的段落具有相同的行为(即,它们隐含地得到line-height: normal)

正如其他人所指出的那样,当段落具有时,段落 line-height: 1.5的计算行高不会被smaller跨度继承.相反,smaller跨度根据自己的字体大小计算自己的行高.当段落有line-height: 1.5; font-size: 14px,那么它的计算行高为14px*1.5 = 21px.如果smaller 跨度仅具有属性font-size: 50%,则其字体大小为14px*50%= 7px,其行高为7px*1.5 = 10.5px(通常将舍入为整个像素).但总的来说,这个 smaller盒子的大小只有周围文本的一半.

和以前一样,浏览器会将smaller跨度垂直对齐到相邻的基线.但是这一次,因为周围的框 smaller比周围的文本短,所以这个重新排列在封闭块中没有任何副作用.它已经适合,所以没有必要像前面那样分散父段的行.

两种情况都代表了规范的一致实现.这是个好消息,因为这意味着我们可以预测行间距行为.

这让我们回到了这个问题的最初原因.虽然我现在明白CSS盒子模型需要这种行为,但作为一名练习印刷师,这很少是我想要的行为.我想要的是一个段落中的行具有一致和精确的行间距,即使该段落中的某些文本跨度较小.

不幸的是,似乎没有办法在CSS处理器或页面布局程序中直接强制CSS中的精确行间距.同样,这是因为CSS框模型:它不使用基线到基线的线间距模型,并且line-height被指定为最小测量值,而不是最大值.

但我们至少可以说无单位行高值会产生CSS中精确行间距的最佳近似值.像我这样的模糊印刷工作者应该觉得使用它们很舒服,因为无单元的值得到规范的认可,并且它们在浏览器中产生一致的结果.它们不是黑客,也不会被弃用.

需要注意的是,它们仍然只是近似值.无单位行高值不会更改基础CSS框模型,也不会更改CSS框定位规则.因此,在某些边缘情况下,它们可能无法获得预期的结果.但永恒的警惕是良好排版的代价.小心那里.