【发布时间】：2012-01-02 22:12:54
【问题描述】：
如果我用padding: 1.2em 或padding: 10% 设置<h1> 元素的样式，是不是相对于：
-
<h1>元素的字体大小？ -
<h1>元素的高度？ - 父元素的填充？
- 还有别的吗？
em 和 % 有什么不同吗？
【问题讨论】：
【发布时间】：2012-01-02 22:12:54
【问题描述】：
em 和% 确实不一样：
Ems
内边距大小是相对于该元素的计算字体大小。
因此，如果您的<h1> 计算出的字体大小为 16 像素，则 1.2 ems 的填充 = 1.2 × 16 像素 = 19.2 像素。
百分比
内边距大小是相对于元素内容区域的宽度（即内部的宽度，不包括元素的内边距、边框和边距）。
因此，如果您的 <h1> 宽度为 500 像素，则 10% 填充 = 0.1 × 500 像素 = 50 像素。
（请注意，顶部和底部填充也将是元素 宽度的 10%，而不是元素高度的 10%。）
【讨论】：
-
百分比填充是相对于包含元素的宽度，而不是元素本身。
-
为什么会有这么多的赞成票？正如@Iouhfy 提到的，填充是相对于父元素的宽度而不是元素本身的宽度（或内容区域）。
您可能会发现以下有用：
“Ems” (em)：“em”是用于 Web 文档媒体的可扩展单元。一个 em 等于当前的 font-size，例如，如果文档的 font-size 为 12pt，则 1em 等于 12pt。 Em 本质上是可扩展的，因此 2em 等于 24pt，.5em 等于 6pt，等等。由于可扩展性和对移动设备友好的特性，Em 在 Web 文档中变得越来越流行。
像素 (px)：像素是用于屏幕媒体（即在计算机屏幕上读取）的固定大小单位。一个像素等于计算机屏幕上的一个点（屏幕分辨率的最小单位）。许多网页设计师在网页文档中使用像素单位，以便在浏览器中呈现其网站时生成像素完美的表示。像素单元的一个问题是它不能向上缩放以供视障读者使用，也不能向下缩放以适应移动设备。
点 (pt)：点传统上用于打印介质（要打印在纸上的任何东西等）。一点等于 1/72 英寸。点很像像素，因为它们是固定大小的单位，不能按大小缩放。
百分比 (%)：百分比单位与“em”单位非常相似，但存在一些基本差异。首先，当前字体大小等于 100%（即 12pt = 100%）。使用百分比单位时，您的文本仍可完全适应移动设备和可访问性。
【讨论】：
“em”单位总是参考字体大小。有关 CSS 单元的参考，请参阅 http://w3schools.com/cssref/css_units.asp。
【讨论】：