Край Эм отличается от элементов с разным размером шрифта

Question

Я работаю с Zurb Foundation (v4), который использует EM, а не PX.

Одна из сторон, которую я нашел с использованием ЭМ, - это когда у элемента есть маржа, заданная $ column-gutter (например, 0.9375em) Если элемент имеет размер шрифта, который НЕ равен 1 (например, 0.875em), то маржа на этот элемент меньше (поскольку ems относится к размеру шрифта), чем элемент, размер шрифта которого равен 1em.

Так что, если у меня есть два элемента рядом друг с другом, фактический результат маржи на обоих несовместим. Я действительно хочу сохранить маржу на элементах, даже если элемент имеет другой размер шрифта. Есть ли разумный способ достичь этого (без использования 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, который относится к базовый размер шрифта (который составляет 16 пикселей в Foundation 4), поэтому вам не нужно иметь дело с размером шрифта родителя.

Если в HTML-иерархии больше родительских элементов, вы должны уважать их всех.

Answer 2

Вы можете использовать устройство rem, что аналогично em, но относительно размера шрифта корневого элемента (html).

Он не работает на IE8 или ниже, к сожалению. Но для него есть Polyfill.