私は、PX ではなく EM を使用している Zurb Foundation (v4) を使用しています。
EM を使用して見つけた 1 つの欠点は、要素に $column-gutter によって設定されたマージン (例: 0.9375em) がある場合です。要素のフォント サイズが 1em ではない場合 (例: 0.875em)、この要素のマージンは小さくなります ( ems は font-size に相対的であるため)、フォント サイズが 1em である要素よりも。
したがって、2 つの要素が隣り合っている場合、両方の実際のマージン結果は矛盾しています。要素のフォントサイズが異なっていても、要素の余白を一定に保ちたいと思っています。（pxを使用せずに）それを達成するスマートな方法はありますか？
unit を使用できます。これは、ルート要素のフォント サイズ ( )remに似ていますが、相対的です。emhtml
残念ながらIE8以下では動きません。しかし、それにはポリフィルがあります。
EM 値は、常に親のフォント サイズの倍数です。
たとえば、要素の font-size が 0.875em の場合、その要素のマージンは 0.875 倍になります。Foundation 4 のベース フォント サイズは 16 ピクセルであるため、前述の要素のフォント サイズは 0.875*16 = 14 ピクセルになります。マージンは 0.9375em に設定されており、この例では 0.9375*16*0.875=13.125px になります。
どこでも 15 ピクセルの余白が必要な場合は、常に親のフォント サイズで割る (この例では 0.875 を使用するため、0.9375EM の代わりに (0.9375/0.875)EM を使用する) か、ベースの font-size に相対的な REM を使用します。 (Foundation 4 では 16px)、親のフォントサイズを扱う必要はありません。
HTML 階層にさらに親要素がある場合は、それらすべてに注意を払う必要があります。