使用em的边距和填充

Question

当1em应用于元素时,它采用浏览器的默认值(通常为16px)或其父级的font-size值,对吗？但是我注意到如果我margin-top: 1em在h1元素中使用类似的东西(不使用重置样式表,因此,h1设置为font-size: 32px),则1em等于32px,即使其父元素设置为font-size: 16px.

但是,使用类似font-size的东西:100%; 解决了这个差异.

我错过了什么？

Answer 1

当1em应用于元素时,它采用浏览器的默认值(通常为16px)或其父级的font-size值,对吗？

不,它需要自己的 font-size,基于其父级(或默认的浏览器提供的值)计算.由于浏览器提供font-size的h1是32像素,因此结果边距是32像素.

但是,使用类似font-size的东西:100%; 解决了这个差异.

通过设置font-size: 100%;或font-size: 1em;在元素上,您告诉它使用其父级的100%字体大小,因此1em在其他任何内容上设置为长度将遵循该100%.

Answer 2

1em等于所讨论元素的字体大小.因此,当使用带边距时,它将等同于您应用边距的元素的字体大小.