css - Relative padding 是相对于什么？

Question

如果我设计一个 <h1>带有 padding: 1.2em 的元素或 padding: 10% , 是相对于:

1. <h1> 的字体大小元素？
2. <h1> 的高度元素？
3. 父元素的填充？
4. 还有别的吗？

em 有什么不同吗？和 % ？

Answer 1

em确实不一样和 % :

Ems

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

因此，如果您的 <h1>计算出来的字体大小是16px，那么1.2ems的padding = 1.2×16pixels = 19.2pixels。

百分比

内边距大小是相对于该元素内容区域的宽度(即内部宽度，不包括元素的内边距、边框和外边距)。

因此，如果您的 <h1>宽度为 500 像素，10% 内边距 = 0.1 × 500 像素 = 50 像素。

(请注意，顶部和底部内边距也是元素宽度的 10%，不是元素高度的 10%。)