em 的高度是多少?
我仍然不清楚 em 中的大小是什么意思?
我在 CSS 中使用过 px、pt。
0.8、1.0 和 1.2 em 是什么意思?
我在 CSS 中看到了高度,如下所示: 高度:0.8em;或高度:1.2em;
它是如何计算的?
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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
多年来,“em”的含义已经发生了变化。并非所有字体都包含字母“M”(例如中文),但所有字体都有高度。因此,该术语的意思是字体的高度,而不是字母“M”的宽度。
让我们看一个简单的例子,我们使用 em 单位来设置字体大小:
更多信息
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."
Let's look at a simple example where we use the em unit to set font sizes:
More Info
1em等于当前字体大小。
2em 表示当前字体大小的 2 倍。
例如,如果一个元素以 12 pt 的字体显示,那么“2em”就是 24 pt。 “em”是 CSS 中非常有用的单位,因为它可以自动适应读者使用的字体,
以下是其他 CSS 单位的链接:
http://www.w3schools.com/cssref/css_units.asp
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
Here's a link to other CSS units:
http://www.w3schools.com/cssref/css_units.asp
1em 等于当前字体大小。 2em 表示当前字体大小的 2 倍。例如,如果一个元素以 12 pt 的字体显示,那么“2em”就是 24 pt。 “em”是 CSS 中非常有用的单位,因为它可以自动适应读者使用的字体。
更多信息
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.
more here
保罗是正确的,但它是“M”而不是“m”。然而,这是一个源自排版/印刷的深奥定义,在这种情况下没有多大用处。就对您有用而言,它是字体大小的百分比。
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.
em 是字母“m”的宽度(以您当前的字体和大小)。
An em is the width of the letter "m" (in your current font and size).
Em 是字符的大小。它会根据字体大小而变化。如果字体大小为 24,则 2Em 将等于容纳两个字体大小 24 的字符所需的空间。
引用自 wiki。
仅供参考:
En是Em的一半。 0.5Em
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.
As quoted from wiki.
FYI:
En is half of Em. 0.5Em
em 表示“临时单位”,它相对于其父元素的当前字体大小。例如,
标题中的文本默认为 2em。这是因为
从其父元素(文档的
)继承其文本大小。如果我将
font-size 设置为 16px(font-size: 16px;)。我的
为 2em 将继承 32px 的大小,因为 2em 是 1em 大小的两倍。在本例中,1em=16px,因此 2em=2x16px=32px。现在,如果您使用以下内容创建 HTML 文档
,则定义以下 CSS 规则。
在网络浏览器 (
Chrome
) 中打开页面并打开浏览器开发工具 (ctrl+shift+I
),您将看到的默认字体大小code>
为 2em。您还将在样式选项卡上看到它是“从正文继承”。
仍在该场景的开发工具中,您可以在盒模型图上看到
顶部和底部边距的边距为 21.440px。如果您查看
的 CSS 默认值,您可以看到
margin-block-start: 0.67em;
和margin-block-end: 0.67 em;
请记住,大小调整是相对于父元素的字体大小,因此 0.67em 是相对于字体大小,而不是
<; em; body>
,您可以通过一点数学来验证这一点,0.67em x 32px=21.440px,这是盒模型图中的边距大小。有关更多信息,请尝试 http://www.123webconnect.com/convert-px-em。 php
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 followingThen you define following CSS rule.
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 themargin-block-start: 0.67em;
andmargin-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