作为比较 ， Arial字体描述了2048个单位的em-square ， 1854年的上升 ， 434的下降和67的行间距 。 这意味着内容区域为112px（1117个单位）和115px（1150个单位或1.15） 。 所有这些指标都是特定于字体的 ， 并由字体设计人员设置 。 font-size:100pxline-height:normal
很明显 ， 设置行高：1是一种不好的做法 。 我提醒你 ， 无单位值是相对的 ， 而不是内容区域相对的 ， 处理小于内容区域的虚拟区域是我们许多问题的根源 。 font-size

文章图片
使用行高：1可以创建小于内容区域的行框但不仅如此 。 值得一提的是 ， 在我计算机上安装的1117字体上（是的 ， line-height:1我安装了所有来自谷歌网页字体的字体） ， 1059种字体（约95%）的计算值大于1 。 他们的计算从0.618到3.378 。 你已经读得很好了 ， 3.378！line-heightline-height
关于行框计算的小细节：
对于内联元素 ， 并增加背景区域 ， 但不增加内容区域的高度（也不增加行框的高度） 。 因此 ， 内容区域并不总是您在屏幕上看到的内容 。 并且没有效果 。 paddingbordermargin-topmargin-bottom
对于替换的内联元素和块化的内联元素： ， 并增加 ， 因此内容区域和行框的高度inline-blockpaddingmarginborderheight
vertical-align：一个属性来统治它们
我还没有提到该属性 ， 尽管它是计算行框高度的重要因素 。 我们甚至可以说垂直对齐可能在内联格式上下文中起主导作用 。 vertical-align
缺省值为 。 是否提醒字体指标的升序和降序？这些值决定了基线的位置 ， 以及比率 。 由于上升者和下降者之间的比例很少是50/50 ， 因此可能会产生意想不到的结果 ， 例如兄弟姐妹元素 。 baseline
从该代码开始：
<p><span>Ba</span><span>Ba</span></p>p{font-family:Catamaran;font-size:100px;line-height:200px;}
一个具有2个兄弟姐妹继承的标记 ， 并已修复 。 基线将匹配 ， 并且行框的高度等于其 。 <p><span>font-familyfont-sizeline-heightline-height

文章图片
相同的字体值 ， 相同的基线 ， 一切似乎都可以如果第二个元素的尺寸较小怎么办？font-size
span:last-child{font-size:50px;}
尽管听起来很奇怪 ， 但默认的基线对齐方式可能会导致更高的（！）行框 ， 如下图所示 。 我提醒你 ， 一个线框的高度是从孩子的最高点到孩子的最低点计算的 。

文章图片
较小的子元素可能会导致行框的高度较高这可能是支持使用无单位值的论据line-height ， 但有时你需要固定的创造完美的垂直节奏.说实话 ， 无论你选择什么 ， 你总是会遇到内联对齐的麻烦 。
再看这个例子 。 带有的标记 ， 包含单个继承<p>line-height:200px<span>line-height
<p><span>Ba</span></p>p{line-height:200px;}span{font-family:Catamaran;font-size:100px;}
线盒有多高？我们应该期待200px ， 但这不是我们得到的 。 这里的问题是有其自身的不同之处（默认为） 。 标记和之间的基线可能不同 ， 因此行框的高度高于预期 。 发生这种情况是因为浏览器进行计算 ， 就好像每个行框都以零宽度字符开头一样 ， 该规范称为支柱 。 <p>font-familyserif<p><span>
一个看不见的角色 ， 但一个看得见的影响 。
要继续 ， 我们面临着与兄弟姐妹元素相同的先前问题 。
【深入剖析 CSS：字体度量、行高和垂直对齐