对于具有不同字体大小的元素，Em的边距是不同的

Question

我正在使用Zurb Foundation（v4），它正在使用EM而不是PX。

我发现使用EMs的一个缺点是元素的边距由$ column-gutter设置（例如0.9375em） 如果元素的字体大小不是1em（例如0.875em），则此元素的边距小于（因为ems相对于字体大小），而不是字体大小为1em的元素。

因此，如果我将2个元素彼此相邻，则两者的实际保证金结果不一致。 即使元素具有不同的字体大小，我也希望保持元素的边距一致。 有没有一种聪明的方法来实现（不使用px）？

Answer 1

您可以使用单位rem，它与em类似，但相对于根元素的字体大小（html）。

不幸的是，它无法在IE8或更低版本上运行。但是它有一个Polyfill。

Answer 2

EM值始终是父级字体大小的倍数。

例如，如果元素的字体大小为0.875em，则该元素的边距将乘以0.875。 Foundation 4中的基本字体大小为16px，因此提到的元素的font-size将为0.875 * 16 = 14px。边距设置为0.9375em，在此示例中为0.9375 * 16 * 0.875 = 13.125px。

如果你想要15px的余量，或者总是将它除以父母的字体大小（在例子中为0.875，所以使用（0.9375 / 0.875）EM而不是0.9375EM），或者使用相对于基数的REM font-size（在Foundation 4中为16px），因此您不必处理父级的字体大小。

如果HTML层次结构中有更多父元素，则需要尊重所有这些元素。