简体繁体 English

使用em的边距和填充

[英]Margin and padding using em

原文 2012-02-28 22:43:48 9 2 css/ margin/ em

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?. 当1em应用于元素时，它采用浏览器的默认值（通常为16px）或其父级的font-size值，对吗？ 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 . 但是我注意到如果我在h1元素中使用margin-top: 1em类的东西（不使用重置样式表，因此，h1设置为font-size: 32px ），那么1em等于32px ，即使它的父级也是如此element设置为font-size: 16px 。

However, using something like font-size: 100%; 但是，使用类似font-size的东西：100％; solves the discrepancy. 解决了这个差异。

What am I missing? 我错过了什么？

2 个解决方案

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? 当1em应用于元素时，它采用浏览器的默认值（通常为16px）或其父级的font-size值，对吗？

No, it takes its own font-size , computed based on its parent (or the default browser-supplied value). 不，它需要自己的 font-size ， 根据其父级 （或默认的浏览器提供的值）计算。 Since the browser-supplied font-size of h1 is 32 pixels, the resultant margin is 32 pixels. 由于浏览器提供的h1 font-size为32像素，因此结果边距为32像素。

However, using something like font-size: 100%; 但是，使用类似font-size的东西：100％; solves the discrepancy. 解决了这个差异。

By setting font-size: 100%; 通过设置font-size: 100%; or font-size: 1em; 或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%. 在一个元素上，你告诉它使用其父级的100％字体大小，因此将1em为其他任何内容的长度将遵循该100％。

1em is equal to the font-size of the element in question . 1em等于所讨论元素的字体大小。 So when using it with margins, it will be equivalent to the font-size of the element you're applying the margin too. 因此，当使用带边距时，它将等同于您应用边距的元素的字体大小。