CSS em 中的高度是多少？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3437987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is height in em?
提问by happyhardik
I am still not clear what does size in em mean?
I have worked px, pt in CSS.
What would 0.8, 1.0 and 1.2 em mean?
I have seen height's in CSS like:
height: 0.8em; or height: 1.2em;
How is it calculated?
我仍然不清楚 em 中的大小是什么意思？
我在 CSS 中使用过 px、pt。
0.8、1.0 和 1.2 em 是什么意思？
我曾在 CSS 中看到过高度，例如：height: 0.8em; 或高度：1.2em；
它是如何计算的？
回答by simplyharsh
The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example, Chinese), but all fonts have a height. The term has therefore come to mean the height of the font – not the width of the letter "M."
多年来，“em”的含义发生了变化。并非所有字体都带有字母“M”（例如中文），但所有字体都有高度。因此，该术语的意思是字体的高度，而不是字母“M”的宽度。
Let's look at a simple example where we use the em unit to set font sizes:
让我们看一个简单的例子，我们使用 em 单位来设置字体大小：
<html>
<style>
h1 { font-size: 2em }
</style>
<body>
<h1>Movies</h1>
</body>
</html>
When used to specify font sizes, the em unit refers to the font size of the parent element. So, in the previous example, the font size of the
h1element is set to be twice the font size of thebodyelement. To find what the font size of theh1element will be, we need to know the font size ofbody. Because this isn't specified in the style sheet, the browser must find it from somewhere else – a good place to look is in the user's preferences. So, if the user sets the normal font size to 10 points, the size of theh1element is 20 points. This makes document headlines stand out relative to the surrounding text. Therefore: Always use ems to set font sizes!
当用于指定字体大小时，em 单位是指父元素的字体大小。因此，在前面的示例中，
h1元素的字体大小设置为body元素字体大小的两倍。要找到h1元素的字体大小，我们需要知道body. 因为这没有在样式表中指定，浏览器必须从其他地方找到它——一个很好的查找位置是在用户的首选项中。因此，如果用户将正常字体大小设置为 10 磅，则h1元素的大小为 20 磅。这使得文档标题相对于周围的文本更加突出。因此：始终使用 em 来设置字体大小！
回答by Haim Evgi
1emis equalto the current font size.
1em的是等于到当前字体大小。
2em means 2 times the size of the current font.
2em 表示当前字体大小的 2 倍。
E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
例如，如果一个元素以 12 pt 的字体显示，那么 '2em' 就是 24 pt。'em' 是 CSS 中一个非常有用的单位，因为它可以自动适应读者使用的字体
Here's a link to other CSS units:
这是其他 CSS 单元的链接：
回答by Sotiris
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
1em 等于当前字体大小。2em 表示当前字体大小的 2 倍。例如，如果一个元素以 12 pt 的字体显示，那么 '2em' 就是 24 pt。'em' 是 CSS 中一个非常有用的单位，因为它可以自动适应读者使用的字体。
回答by prodigitalson
Paul is correct, however its "M" not "m". However this is an esoteric definition derived from typesetting/printing and isnt of much use in this case. In terms of whats going to be useful to you you its a percentage of font size.
保罗是正确的，但它的“M”不是“m”。然而，这是一个源自排版/打印的深奥定义，在这种情况下没有多大用处。就什么对您有用而言，它是字体大小的百分比。
回答by Rakesh Juyal
Em is the size of a character. It will vary depending upon the font size. If the font size is 24 then 2Em will be equal to the space it should take to hold two characters of the font size 24.
Em 是字符的大小。它会因字体大小而异。如果字体大小为 24，那么 2Em 将等于容纳字体大小为 24 的两个字符所需的空间。
As quoted from wiki.
正如维基引用的那样。
An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font.
em 是排版领域的度量单位。该单位定义了字母宽度和高度相对于当前字体的磅值的比例。
FYI:En is half of Em. 0.5Em
仅供参考：En 是 Em 的一半。0.5Em
回答by Paul Schreiber
An em is the width of the letter "m" (in your current font and size).
em 是字母“m”的宽度（以您当前的字体和大小）。
回答by Dwayne
An em means "ephemeral unit" it is relative to the current font size of its parent element. For instance, the text in an <h1>heading is 2em by default. This comes from the fact that an <h1>inherits its text size from its parent element, the <body>of the document. If I set my <body>font-size to 16px (font-size: 16px;). My <h1>being 2em would inherit a size of 32px, because 2em is twice the size of 1em. In this case 1em=16px so 2em=2x16px=32px. Now if you create an HTML document with the following
em 表示“临时单位”，它相对于其父元素的当前字体大小。例如，<h1>标题中的文本默认为 2em。这是因为 an<h1>从其父元素（<body>文档的of）继承了它的文本大小。如果我将<body>字体大小设置为 16px（字体大小：16px;）。我<h1>的 2em 将继承 32px 的大小，因为 2em 是 1em 大小的两倍。在这种情况下 1em=16px 所以 2em=2x16px=32px。现在，如果您使用以下内容创建 HTML 文档
<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>
Then you define following CSS rule.
然后定义以下 CSS 规则。
body {font: normal 16px Arial, Helvetica, sans-serif;}
Open the page in a web browser (Chrome) and open the browsers development tools (ctrl+shift+I), you'll see the default font-size for an <h1>is 2em. You will also see on the styles tab that it is "Inherited from body".
While still in the Development Tools for this scenario you can see on the Box Model diagram that the <h1>margin is 21.440px on the top and bottom margins. If you look in the CSS defaults for <h1>you can see the margin-block-start: 0.67em;and margin-block-end: 0.67em;Remember sizing is relative to the font size of the parent element, so 0.67em is relative to the <h1>font size not the font size of the <body>, you can verify this with a little math, 0.67em x 32px=21.440px and this is the size of the margin of the <h1>in the Box Model diagram. For more information try http://www.123webconnect.com/convert-px-em.php
在 Web 浏览器 ( Chrome) 中打开页面并打开浏览器开发工具 ( ctrl+shift+I)，您将看到默认字体大小为<h1>2em。您还将在样式选项卡上看到它是“从正文继承的”。在此场景的开发工具中，您可以在盒模型图<h1>上看到顶部和底部边距的边距为 21.440 像素。如果您查看 CSS 默认值，<h1>您可以看到margin-block-start: 0.67em;和margin-block-end: 0.67em;记住大小是相对于父元素的字体大小，因此 0.67em 是相对于<h1>字体大小而不是 的字体大小<body>，您可以通过一些数学来验证这一点, 0.67em x 32px=21.440px 这是<h1>盒模型图中的边距大小。有关更多信息，请尝试http://www.123webconnect.com/convert-px-em.php
