相对填充是相对于什么的？

Question

如果我用 padding: 1.2em 或者 padding: 10% 来设置一个 <h1> 元素的样式，这个值是相对于以下哪个属性：

1. <h1>元素的字体大小？
2. <h1>元素的高度？
3. 父元素的内边距(padding)？
4. 其他什么属性？

而且在使用 em 和 % 单位时是否有区别？

- koen

Answer 1

对于em和%来说，它们的确是不同的：

ems（字体宽度单位）

填充大小是相对于该元素计算出的字体大小而言的。

因此，如果您的<h1>的计算字体大小为16px，则1.2个ems的填充= 1.2×16像素= 19.2像素。

百分比

填充大小相对于该元素内容区域的宽度（即元素内部而不包括填充、边框和外边距的宽度）。

因此，如果您的<h1>宽度为500像素，则10%填充= 0.1 × 500像素= 50像素。

（注意，上下填充也将是元素宽度的10%，而不是元素高度的10%。）

- Paul D. Waite

---

百分比内边距是相对于包含元素的宽度而言，而不是元素本身。 - lohfu

为什么这个帖子有这么多赞？正如 @Iouhfy 所提到的，padding 是相对于父元素的宽度而不是元素本身的宽度（或内容区域）。 - denik1981

Answer 2

"

"em"单位始终是相对于字体大小而言的。请参考http://w3schools.com/cssref/css_units.asp了解CSS单位的参考资料。

"

- PaulF

Answer 3

您可能会发现以下内容有用：

“Ems” (em)：在网络文档媒体中使用的可伸缩单位。1个em等于当前字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt。em具有可伸缩性，因此2em相当于24pt，0.5em相当于6pt等。由于可伸缩性和对移动设备友好性，em在网络文档中变得越来越受欢迎。

Pixels (px)：在屏幕媒体（即在计算机屏幕上阅读）中使用的固定大小单位。一个像素等于计算机屏幕上的一个点（屏幕分辨率的最小划分）。许多网络设计师在网络文档中使用像素单元，以便以像素完美的方式呈现其网站在浏览器中的显示效果。像素单位的一个问题是它不会向上缩放以适应视力障碍读者或向下缩放以适应移动设备。

Points (pt)：传统上用于印刷媒体（任何要印在纸张等介质上的内容）。1个Point等于1/72英寸。像素一样，点也是固定大小单位，无法缩放大小。

Percent (%)：百分比单位与“em”单位非常相似，但有一些根本性的区别。首先，当前字体大小等于100％（即12pt = 100％）。在使用百分比单位时，您的文本保持完全可伸缩，适用于移动设备和辅助功能。

摘自此处。

- Rich O'Kelly