Skip to main content

One post tagged with "VerticalAlign"

View All Tags

· 19 min read

本文翻译自《Deep dive CSS: font metrics, line-height and vertical-align》

line-heightvertical-align 都是很简单的CSS属性,简单到我们相信自己能够完全理解它们怎么工作以及怎样使用它们。其实了解这两个属性不是件易事,因为它们在CSS中起着一个鲜为人知却十分重要的作用:内联格式化上下文

例如,line-height 可以被设为长度或者无单位的值,默认值为 normal。但normal值具体是多少呢?通常应该是1或者1.2,甚至 CSS规范 也没有明确。我们知道无单位的 line-height 是相对于字体大小来确定的,但问题是 font-size: 100px 对于不同的字体来说渲染的结果不尽相同,这时 line-height 的表现是否也是不一样呢?是否真的是介于1到1.2之间呢?还有 vertical-align 会对 line-height 有什么影响呢?