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的邊距因字體大小不同而不同

回答

相關問題