我有这个声明
body {font: normal .625em/1.2em Arial, sans-serif;}
我通常希望任何段落标记等都会继承行高并使其适应特定大小。例如
p {font-size: 2.0em}
假设基础16px浏览器字体大小* .625 = 10px * 2.0em = 20px,在20px上1.2em行高为24,的行高应为24px。
奇怪的是,它似乎只是渲染为1em
如果我将身体声明更改为
body {font: normal .625em/1.2 Arial, sans-serif;}
省略正确渲染的em单位。所以我想我的问题已经解决,但我以前从未见过这个问题,而且为什么会这样,我很困惑。有谁知道它的原因?对不起,我无法指向我在本地建立的网站。
答案 0 :(得分:2)
基本上,如果你包含单位,那么行高是基于祖先元素的font-size而不是当前元素的font-size。
答案 1 :(得分:0)
继承属性时,继承的值为“computed value”。这意味着如果为1.2em
声明body
的值,则body
字体大小乘以1.2,结果是{{1}的任何子项将继承的值。 1}}没有设置属性。无论他们自己的字体大小是什么。
对于line-height
,有关使用纯(无单位)数字的特殊规则:“属性的使用值是此数字乘以元素的字体大小。 [...]计算出的值与指定值相同。“这意味着当您将值指定为body
时,您将获得1.2
的相同行高(”已使用值“)当你使用body
时,但继承的值(“计算值”)是纯数字1.2。这意味着它将乘以每个元素自己的字体大小。
士气是1.2em
通常应使用纯数设置。此外,通常最好为所有元素设置它,避免它的所有继承,例如, line-height
。 (顺便说一句,对于Arial,1.3通常优于1.2。StackOverflow使用对应于1.3的值,Arial作为主要字体,并且此处的行高几乎不过量。但这取决于行长等因素。)