line-height
和vertical-align
在CSS中是两个简单的属性。如此简单,大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们。但事实上并不如此。他们其实很复杂,也是CSS中难点之一,而且也是CSS中特性之一:内联格式化上下文(inline formatting context)。比如可以设置line-height
带有长度单位的值或一个无单位的值,但其默认值是normal
。那么在CSS中normal
是什么呢?我们常常认为它是(或者应该是)1
或者1.2
,甚至也可以说,CSS规范都不清楚是哪一个。我们也知道,没有单位的line-height
是相对于font-size
的,但问题是,font-size: 100px;
在使用不同的字体(font-family
)表现的行为是不一样的,所以line-height
总是相同或不同的吗?真的是1
还是1.2
吗?另外vertical-align
对line-height
的影响又是什么呢?要深入研究CSS的机制可以说没有这么简单......