blocks|key|2681336|text|em等于所讨论元素的字体大小。如果你的按钮的字体大小不同于16px，那么em也会不同。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2681337|您所查看的所有元素都必须将其字体大小设置为16px。这并不奇怪，因为这是许多浏览器的默认设置。|2681338|entityMap^0|0|2|10|2|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<code>em</code> is equal to the font-size of the element in question. If your button has a font-size different from 16px, then <code>em</code> will be different as well.

All of the elements you've been looking at must have their font-size set to 16px. This isn't too surprising, as it's the default for many browsers.

blocks|key|4131794|text|从该页面about+units+in+CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4131795|4131796|+em和ex单位取决于字体，并且对于文档中的每个元素可能不同。em就是字体大小。|blockquote|4131797|4131798|4131799|有关The+amazing+em+unit+and+other+best+practices的em单元的更多信息|style|CODE|4131800|4131801|+"em“的意思多年来发生了变化。并非所有字体都有字母"M“(例如中文)，但所有字体都有高度。因此，这个术语的意思是字体的高度，而不是字母"M“的宽度。|4131802|4131803|在CSS中，em单位是用于测量长度的通用单位，例如页边距和元素周围的填充。|4131804|4131805|最后是来自W3+specification的定义|4131806|4131807|+em单元|4131808|4131809|等于使用它的元素的“font-size”属性的计算值。|4131810|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/Style/Examples/007/units.en.html|1|http://www.w3.org/WAI/GL/css2em.htm|2|http://www.w3.org/TR/css3-values/#font-relative-lengths^0|4|I|0|0|0|0|0|0|1B|2|2|18|1|0|0|0|0|0|0|5|G|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1J|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1L|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1M|8|@$A|1N|B|1O|L|M]]|9|@$A|1P|B|1Q|1|1R]]|C|$]]|$1|N|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]|$1|O|3|P|5|G|7|1T|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|1V|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1W|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|1X|8|@]|9|@$A|1Y|B|1Z|1|20]]|C|$]]|$1|W|3|-4|5|6|7|21|8|@]|9|@]|C|$]]|$1|X|3|Y|5|G|7|22|8|@]|9|@]|C|$]]|$1|Z|3|-4|5|6|7|23|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|24|8|@]|9|@]|C|$]]|$1|12|3|-4|5|6|7|25|8|@]|9|@]|C|$]]]|13|$14|$5|15|16|17|C|$18|19]]|1A|$5|15|16|17|C|$18|1B]]|1C|$5|15|16|17|C|$18|1D]]]]

From this page <a href="http://www.w3.org/Style/Examples/007/units.en.html" rel="nofollow">about units in CSS</a>:

<blockquote>
 The em and ex units depend on the font and may be different for each
 element in the document. The em is simply the font size.
</blockquote>

More information about the <code>em</code> unit from <a href="http://www.w3.org/WAI/GL/css2em.htm" rel="nofollow">The amazing em unit and other best practices</a>:

<blockquote>
 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". 
 
 In CSS, the em unit is a general unit for measuring lenghts, for
 example page margins and padding around elements.
</blockquote>

And finally the definition from <a href="http://www.w3.org/TR/css3-values/#font-relative-lengths" rel="nofollow">W3 specification</a>:

<blockquote>
 em unit 
 
 Equal to the computed value of the ‘font-size’ property of the element on which it is used.
</blockquote>

blocks|key|351401|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|351402|，我知道16px等于1em。|blockquote|351403|351404|351405|这是不对的。unil+1em并不对应于特定的像素值，它对应于元素当前字体的字符大小。|offset|length|style|CODE|351406|默认情况下，该按钮具有不同的字体。设置按钮的字体，它会得到你习惯的大小。|351407|但是，如果希望大小为一定数量的像素，则应使用px单位而不是em。即使您指定了相同的字体系列和字体大小，em单位在浏览器和操作系统之间也可能略有不同。|351408|entityMap^0|0|0|0|0|B|3|0|0|M|2|T|2|1F|2|0^^$0|@$1|2|3|-4|4|5|6|R|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|S|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|T|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|U|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|V|7|@$H|W|I|X|J|K]]|8|@]|9|$]]|$1|L|3|M|4|5|6|Y|7|@]|8|@]|9|$]]|$1|N|3|O|4|5|6|Z|7|@$H|10|I|11|J|K]|$H|12|I|13|J|K]|$H|14|I|15|J|K]]|8|@]|9|$]]|$1|P|3|-4|4|5|6|16|7|@]|8|@]|9|$]]]|Q|$]]

<blockquote>
 I know 16px is equal to 1em.
</blockquote>

That is not right. The unil <code>1em</code> doesn't correspond to a specific pixel value, it corresponds to the character size of the current font of the element.

The button has a different font by default. Set the font of the button, and it will get the size that you are used to.

However, if you want the size to be a certain number of pixels, you should use the <code>px</code> unit instead of <code>em</code>. The <code>em</code> unit may vary somewhat between browsers and operating systems, even if you specify the same font family and font size.

blocks|key|351427|text|按钮的行高可能不同于其他元素的行高，如果1em是您设置的基数，则1em仅等于16px。这很有可能，但我不清楚你给出的描述，所以我只想指出。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|351428|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

line-height for the button may be different than the line-height for the other element, plus 1em is only equal to 16px if that is the base that you have set. it very well may be, but it wasn't clear to me in the description you gave so I just want to point it out.

blocks|key|351456|text|其他人谈到了对em单位如何与像素相关的误解，但潜在的问题还没有得到充分解决。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|351457|我今天发布了关于同样问题的帖子，这是showdev的answered+here。|offset|length|351458|本质上，按钮有一个“系统字体”应用于它，阻止它继承其父按钮的字体大小。据我所知，所有主流浏览器都会发生这种情况，这是“预期行为”。|351459|要克服此问题，请在css中指定button标签(或仅特定按钮)应显式继承其字体大小：|351460|button+{
+++++font-size:inherit;
}|code-block|syntax|javascript|351461|这将使它与您正在处理的其他元素一样对待em大小。当然，这也会改变文本的大小，这对你来说可能是问题，也可能不是问题。|351462|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/24536160/why-does-the-button-tag-treat-em-differently-from-how-a-div-does^0|0|Q|D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Others have spoken about the misunderstanding of how em units relate to pixels, but the underlying problem hasn't been addressed sufficiently.

I posted about the same problem today, and it was <a href="https://stackoverflow.com/questions/24536160/why-does-the-button-tag-treat-em-differently-from-how-a-div-does">answered here</a> by showdev.

Essentially, the button has a "system font" applied to it, that stops it from inheriting the font-size of its parent. This happens across all the major browsers, from what I can see, and is "expected behaviour."

To overcome this, in your css, specify that button tags (or just a specific button) should explicitly inherit their font size:

<pre><code>button {
 font-size:inherit;
}
</code></pre>

That'll make it treat em sizes the same as the other elements you're dealing with. Of course, that will also change the size of the text on it, which might or might not be an issue for you...

blocks|key|776394|text|1em等于font-size默认值等于16px+(浏览器默认字体大小选项)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|776395|示例|776396|<button+style="padding:0;border:0;background:#2f55c3;color:#fff;min-width:4em;height:3em;font-size:1em;">Text</button>|code-block|syntax|javascript|776397|​|776398|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

1em equal font-size
default equal 16px (browser default font-size option)

example
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button style="padding:0;border:0;background:#2f55c3;color:#fff;min-width:4em;height:3em;font-size:1em;"&gt;Text&lt;/button&gt;</code></pre>
</div>
</div>

I created a button with a button html tag. Now I'm trying to make the height and width in em. I know 16px is equal to 1em. That rule applies to everything I've seen so far except the button. If I wanted the button height to be 45px, the button will be 45px high. If I wanted to change the 45px to em, which would be 2.8125em. It would be a lot shorter. To make it close to 45px with em it would actually be around 3.5em which in px is actually 56px. Why is that? Is that a browser issue? I'm using Safari by the way.

Why is em different than px on a button?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我创建了一个带有按钮html标签的按钮。现在，我正在尝试设置em中的高度和宽度。我知道16px等于1em。这条规则适用于我到目前为止所见过的所有东西，除了按钮。如果我希望按钮的高度是45px，那么按钮的高度就是45px。如果我想把45px改成em，那就是2.8125em。它会短得多。用em使它接近45px，实际上大约是...

问为什么按钮上的em和px不同？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么按钮上的em和px不同？EN