Em的边距因字体大小不同而不同

我正在使用EMs而不是PX的Zurb Foundation（v4）。Em的边距因字体大小不同而不同

一个向下侧我发现使用EMS是当元件具有余量由$列沟槽设置（例如0.9375em）如果元件具有字体大小这是不1em的（例如0.875em），则边缘上这个元素比它的字体大小是1em的元素更小（因为ems是相对于字体大小的）。

因此，如果我有两个相邻的元素，两者的实际余量结果是不一致的。即使元素具有不同的字体大小，我也确实想保持元素上的边距一致。有没有一种明智的方式来实现（不使用px）？

2013-12-22 Amir Souchami

你能举个例子吗？听起来你应该简单地使用一个考虑到字体大小差异的数字。 –

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

例如，如果元素的font-size是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，这是相对于基础字体大小（基础4中为16px），所以您不必处理父级的字体大小。

如果有在HTML的层次结构更父元素，你需要支付对于所有的人。

来源

2013-12-22 23:18:55

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

不幸的是，它不能在IE8或更低版本上工作。但是它有一个Polyfill。

来源

2013-12-22 12:05:36 zeroflagL

你知道使用em的解决方法吗？ –

@AmirSouchami如果可能的话，您可以为不同字体大小的内容使用额外的内部元素。 – zeroflagL

Em的边距因字体大小不同而不同

回答

相关问题