我应该使用像素还是em来定义CSS边距？为什么？什么时候使用？

Question

我们有一个类似以下规则的CSS文件：

.directory-result ul
{
    margin-top: 20px;
    width: 60em;

}

.about-text
{
    margin-top: 1em;
    margin-bottom: 1em;
}

一切正常运作，但我们特别关注margin-top值之间的不一致性。其中一个是20px，另一个是1em。

应该使用哪个最好？在决定使用哪个时需要考虑哪些因素？谢谢。

- DaveDev

Answer 1

em单位用于在页面的缩放比例变化时更好地实现页面元素的可伸缩性，特别是对于旧浏览器（如IE6）和移动平台来说尤为重要。 px单位用于表示绝对值，而em相对于特定元素的字体大小。 1em表示一行字体，例如你有一个字体大小为12px的框，那么1em将等于12px。

此外，使用px似乎更容易，因为您知道确切的值，但是em单位会继承其容器的值。

<p>Text</p>
<div class="box">
  <p>Lorem</p>
</div>

p {
  font-size: 1.2em;
}

.box {
  font-size: 1.2em;
}

在这种情况下，第一个<p>的字体大小将等于基本字体大小*1.2，而第二个<p>将以字体大小*1.2*1.2显示。

- fantactuka

---

您在示例中提到了字体大小，但没有像楼主询问的那样涉及边距。 - cfx

Answer 2

它们只是衡量的两种不同方式。Em与字体大小相关（传统上，1em大约是给定字体中字母M的宽度），而px是像素。

如果您使用em构建所有内容，则当用户调整其字体大小时（例如使用IE的“页面”>“文本大小”菜单），所有内容都会相应缩放。它还使得更容易按垂直节奏工作。

当您想要构建“像素完美”的东西时，像素更好。请注意，CSS像素并不总是等于屏幕像素-主要是因为现代浏览器和移动设备允许缩放。不过，这通常不是问题，因为整个页面会相应缩放。

无论您做什么，请确保始终保持一致-这样以后的生活会更轻松。

- Olly Hodgson

Answer 3

EMS单位相对于浏览器中的当前字体大小。因此，如果用户增加字体大小*，或者您在CSS中更改元素的字体大小，则边距应该仍然与文本成比例地看起来“正确”。

*(如果用户缩放页面而不是增加文本大小（在Firefox和Chrome中现在是默认选项，在IE中也是一个选项），则这将不再重要）。

如果您使用边距来使某些内容与其他内容保持固定像素距离，则显然应该坚持使用像素。

- Paul D. Waite

Answer 4

这里还有一个非常好的深入教程：

px – em – % – pt – keyword

- Sarfraz

Answer 5

在这个示例中，directory-result ul代表一个块 - 类似于列表/菜单，像素尺寸非常重要。我们不能总是依赖定义文本大小的em，因为如果由于某些背景图像需要20px空间-好吧，我们需要20px，没有妥协。

请注意，您无法创建并保存即使是10em宽的图像，因此我看不出为什么应该在网页上使用不同的单位。它只会创建混乱，并且后来很难保持布局。

然而，有一个地方可以使用em - 我说的是文本块。我猜测在您的代码中，about-text放置在其他文本中，其中添加1em（文本高度）的顶部/底部边距是有意义的。就像在任何文本编辑器（例如MS Word中的行距）中一样- 当行之间的间距由文本高度乘以定义时，文本看起来最好

因此，在我的观点中- 在处理设计并默认使用以像素为单位测量的图像的所有填充/边距时，请使用pixels。

无论何时您在文本块内处理文本，并且希望在文本节点之间添加均匀的间距-请使用em。

- Piotr Rochala