深入剖析 CSS:字体度量、行高和垂直对齐

Line-height 并且是简单的 CSS 属性。如此简单,以至于我们大多数人都相信要完全理解它们的工作原理以及如何使用它们。但事实并非如此。它们真的很复杂,也许是最难的,因为它们在创建CSS鲜为人知的功能之一(内联格式设置上下文)方面发挥着重要作用vertical-align

例如,可以设置为长度或无单位值 line-height 1,但默认值为 。好吧,但什么是正常的?我们经常读到它是(或应该是)1,或者可能是1.2,甚至是 normal CSS规范在这一点上尚不清楚.我们知道无单元是相对的,但问题是它的行为在字体系列之间是不同的,所以总是相同还是不同?它真的介于 1 和 1.2 之间吗?以及,它有什么影响? line-height font-size font-size: 100px line-height vertical-align line-height

深入了解一个不那么简单的CSS机制…

我们先来谈谈 font-size

看看这个简单的HTML代码,一个包含3的标签,每个标签都有不同的: