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;
}

有趣的是，在“样式”下没有提到Chrome中的浏览器设置的font-size不同，但在Firefox中你可以在Computed Styling中看到字体大小是{{1它来自浏览器默认的forms.css样式表，上面写着13.3333px。

因此，某些浏览器默认样式并未明确显示，这会影响按钮。

编辑：使用button { font: -moz-button; }按钮按预期方式设置样式，感谢@cen

Answer 2

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

网上有很多资源和意见。谷歌'px vs em'让你可以忍受。 :)

修改

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

出于这个原因，许多开发人员倾向于使用rem单位而不是em单位：rem是“root em”，或者文档根目录的字体大小，而不是包含元素。它还有一些其他好处，特别是：rem单位在嵌套em之类的元素时不会成倍增加（例如，如果你有嵌套的.em div，那么'你'会有一个糟糕的，或至少是意料之外的时间。）

演示：http://jsfiddle.net/Palpatim/yzvS8/4/

Answer 3

“em”是一个可扩展的单位，用于网络文档媒体，em等于当前的字体大小，因此1em = 12字体，2em = 24字体，依此类推。

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

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

希望有所帮助:)

Answer 4

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

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

4 个答案: