不同的按钮大小取决于我使用的单位。为什么？

Question

好的，这很可能是基本的 Web 开发 101，但是有人可以向我解释为什么这两个按钮的大小不同吗？唯一的区别是第一个按钮使用em 单位，第二个按钮使用px。

jsFiddle（演示）

HTML

<button type="button" class="em">em</button>

<button type="button" class="px">px</button>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

.em {
  position: relative;
  width: 9.375em; /* 150px */
  height: 3.125em; /* 50px */
  background: #18a397;  
  text-align: center;
  margin: 1em;
  box-sizing: content-box;   
}

.px {
  position: relative;
  width: 150px; /* 9.375em */
  height: 50px; /* 3.125em */
  background: #18a397;  
  text-align: center;
  margin: 16px;
}

如果我将第一个按钮更改为 div，例如：<div class="em">em</div> 元素的大小将调整为与第二个按钮相同的大小。

因此，出于某种原因，px 和 em 与 <button> 一起使用是有区别的 - 但我不知道是什么以及为什么......？

测试于： Safari 7、Chrome 31.0.1650.63 和 Firefox 26.0。

Answer 1

在您的示例中，如果您查看计算样式，您的按钮实际上会出现 font-size 或 13px。即使您的html, body 规则应该使16px (100%,) 它不是。它肯定会出现在13px。当然，由于 .em 是根据 font-size 计算得出的，因此最终的像素大小不是您所期望的。

对按钮强制使用 font-size 将使它们显示相同：

http://jsfiddle.net/yzvS8/3/

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.em {
  position: relative;
  width: 9.375em; /* 150px */
  height: 3.125em; /* 50px */
  background: #18a397;  
  text-align: center;
  margin: 1em;
  font-size: inherit;
}

.px {
  position: relative;
  width: 150px; /* 9.375em */
  height: 50px; /* 3.125em */
  background: #18a397;  
  text-align: center;
  margin: 16px;
  font-size: inherit;
}

有趣的是，在“样式”下没有提到 font-size 在 Chrome 中被浏览器设置不同，但在 Firefox 中，您可以在 Computed Styling 中看到 font-size 是 13.3333px 并且它是来自浏览器的默认 forms.css 样式表说 button { font: -moz-button; }。

因此，一些浏览器默认样式本身并没有清楚地呈现，正在影响按钮。

编辑：使用font-size: inherit; 让按钮按预期设置样式，感谢@cen

Answer 2

px 是一个“像素”，它在给定屏幕上具有相同的大小，而不管它周围有什么。 em 是一个“em 空间”，它会根据您用于呈现当前元素的字体大小而变化。我的偏好是使用em 单位来调整与类型密切相关的排版或布局元素的大小/位置，例如引号框或文本列，以及其他非类型特定布局的百分比，例如网格。

网络上有很多资源和意见。谷歌“px vs em”，尽你所能。 :)

编辑

为了进一步解决您的问题：当您将元素更改为 div 而不是 button 时高度匹配的原因是因为浏览器具有适用于各种元素的默认样式。默认情况下，button 样式可能（取决于您的浏览器）具有与文档的默认文本大小不同的文本大小。这意味着您的em 单元在button 中的大小与在div 中的大小不同。

因此，许多开发人员倾向于使用rem 单位而不是em 单位：rem 是“root em”，或文档根部的字体大小，而不是包含元素.它还有其他一些好处，特别是：当你像 em 那样嵌套元素时，rem 单元不会相乘（例如，如果你嵌套了 .em div，你会遇到一个坏的，或者至少是出乎意料的时间。）

还有一个演示：http://jsfiddle.net/Palpatim/yzvS8/4/

Answer 3

“em”是用于网络文档媒体的可缩放单位，em 等于当前字体大小，因此 1em = 12 字体和 2em = 24 字体以此类推。

像素是屏幕媒体中使用的固定大小的单位（即在计算机屏幕上读取）

所以说字体大小 12 应该等于 12px，这就是 1em。

希望对你有帮助:)

Answer 4

这是因为像素和 em 是两种不同的度量单位，例如英寸和英尺。 ems 的大小由当前字体大小定义。一个 en 等于当前字体大小。所以 em 为 2 等于当前字体大小的两倍。