html - Em 的边距在不同字体大小的元素上是不同的

Question

我正在与使用 EM 而不是 PX 的 Zurb Foundation (v4) 合作。

我发现使用 EM 的一个缺点是元素的边距由 $column-gutter(例如 0.9375em) 设置如果元素的字体大小不是 1em(例如 0.875em)，则该元素的边距比其字体大小为 1em 的元素小(因为 ems 是相对于字体大小的)。

因此，如果我将 2 个元素放在一起，则两者的实际 margin 结果是不一致的。我真的想保持元素的边距一致，即使元素具有不同的字体大小。有没有一种聪明的方法可以实现这一目标(不使用 px)？

Answer 1

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

例如，如果元素的字体大小为 0.875em ，则该元素的边距将乘以 0.875。 Foundation 4 中的基本字体大小为 16px，因此上述元素的字体大小将为 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 层次结构中有更多的父元素，您需要尊重所有这些元素。