使用em的边距和填充 [英] Margin and padding using em

问题描述

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

When 1em is applied to an element, it takes the default value of the browser (usually, 16px) or the font-size value of its parent, right?. But I noticed that if I use something like margin-top: 1em in a h1 element (without using a reset stylesheet, and therefore, h1 is set to font-size: 32px), then 1em is equal to 32px, even if its parent element is set to font-size: 16px.

但是，使用类似font-size的东西:100％;解决差异.

However, using something like font-size: 100%; solves the discrepancy.

我想念什么?

推荐答案

将1em应用于元素时，它采用浏览器的默认值(通常为16px)还是其父级的字体大小值，对吗?

When 1em is applied to an element, it takes the default value of the browser (usually, 16px) or the font-size value of its parent, right?

否，它需要自己的 font-size，并根据其父级(或浏览器提供的默认值)计算出.由于浏览器提供的h1的font-size为32像素，因此结果边距为32像素.

No, it takes its own font-size, computed based on its parent (or the default browser-supplied value). Since the browser-supplied font-size of h1 is 32 pixels, the resultant margin is 32 pixels.

但是，使用类似font-size的东西:100％;解决差异.

However, using something like font-size: 100%; solves the discrepancy.

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

By setting font-size: 100%; or font-size: 1em; on an element, you're telling it to use 100% of the font size of its parent, so setting 1em as a length on anything else will follow that 100%.

这篇关于使用em的边距和填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！