logo标签列表

什么是em中的height？

csssizeheight
21

我仍不清楚em单位中的尺寸是什么意思？
我已经在CSS中使用过px和pt单位。
0.8、1.0和1.2 em代表什么？
我在CSS中看到过像这样的高度： height: 0.8em; 或者 height: 1.2em;
它是如何计算的？

3
除了ems，你还可以用ens和exs来衡量距离。 - Paul Schreiber
1
一个关于“em vs px”的问题：https://dev59.com/x3RB5IYBdhLWcg3weXOX - Ciro Santilli OurBigBook.com
7个回答
32
"em"这个词的意义随着时间的推移而改变。并非所有字体都包含字母"M"（例如中文），但所有字体都有高度。因此，该术语现在指的是字体的高度 - 而不是字母"M"的宽度。
让我们看一个简单的例子，其中我们使用em单位设置字体大小：
<html>
  <style>
    h1 { font-size: 2em }
  </style>
  <body>
    <h1>Movies</h1>
  </body>
</html>

当用于指定字体大小时，em单位是相对于父元素的字体大小而言的。因此，在上一个例子中，h1元素的字体大小设置为body元素字体大小的两倍。要找到h1元素的字体大小，我们需要知道body元素的字体大小。由于样式表中没有指定，浏览器必须从其他地方找到它——查找的好地方是用户的首选项。因此，如果用户将常规字体大小设置为10点，则h1元素的大小为20点。这使文档标题相对于周围的文本脱颖而出。因此：始终使用ems设置字体大小！

更多信息

22

1em相当于当前字体大小。

2em代表当前字体大小的两倍。

例如，如果一个元素以12pt的字体显示，那么'2em'就是24pt。 'em'在CSS中非常有用，因为它可以自动适应读者使用的字体。

这里是其他CSS单位的链接：

http://www.w3schools.com/cssref/css_units.asp

3

1em等于当前字体大小。2em表示当前字体大小的两倍。例如，如果一个元素以12pt的字体显示，那么“2em”就是24pt。在CSS中，“em”是一个非常有用的单位，因为它可以自动适应读者使用的字体。

更多信息请点击这里

3

保罗是正确的，但应该是"M"而不是"m"。然而，这是一个来自排版/印刷术语的玄学定义，在这种情况下并没有太大用处。对于你来说，有用的是字体大小的百分比。

我正准备澄清一下你链接的维基文章中几乎完全相同的内容，所以 :-P - prodigitalson
2

“em”是指当前字体和大小下字母“m”的宽度。

1
这实际上并不是真的，这只是一个城市传说 :-) 有些字体甚至没有“m”，即使那些有“m”的字体其宽度有时也小于一个em：http://en.wikipedia.org/wiki/Em_%28typography%29 - paxdiablo
2
这不是城市传说，只是该术语的弃用用法。http://www.adobe.com/uk/type/topics/glossary.html#ememspaceemquad - dreamlax
2

Em是字符的大小。它取决于字体大小。如果字体大小是24，那么2Em将等于容纳两个24号字体大小字符所需的空间。

引用自维基百科。

EM是排版领域中的一种度量单位。该单位定义了字母宽度和高度与当前字体的点大小的比例。

提醒：En是Em的一半。0.5Em

0

em是“临时单位”，它相对于其父元素的当前字体大小而言。例如，<h1>标题中的文本默认为2em。这是因为<h1>从其父元素——文档的<body>继承其文本大小。如果我将<body>的字体大小设置为16px（font-size: 16px;），那么我的<h1>将会继承32px的大小，因为2em是1em的两倍大小。在这种情况下，1em=16px，所以2em=2x16px=32px。现在，如果您创建一个包含以下内容的HTML文档：

<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>

然后你定义以下CSS规则。

body {font: normal 16px Arial, Helvetica, sans-serif;}

在网页浏览器（Chrome）中打开页面并打开浏览器开发工具（ctrl+shift+I），您将看到 <h1> 的默认字体大小为 2em。您还会在样式选项卡中看到它是“从 body 继承的”。 在此场景下仍然在开发工具中，您可以在框模型图中看到 <h1> 边距上下边缘为 21.440px。如果您查看 <h1> 的 CSS 默认值，则可以看到 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。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接