Использование относительных единиц, таких как em, является отличным способом для поддержания вертикального размера веб-страницы, когда пользователь изменяет размер текста в браузере.
Скажем, у вас есть HTML заголовок H3 размером 24 пикселя. Не имеет значения, как установлен размер шрифта font-size (пиксели, EM, проценты, и т.д.). Используя Firebug, вы можете узнать фактический размер шрифта в пикселях, проверьте опцию «Show Computed Style» в правом верхнем углу панели CSS/Style при просмотре в режиме HTML.
Вы измерили дизайн, и убедились, что нижний отступ от заголовка H3 до следующего элемента равен 9 пикселям. Конечно, вы можете установить отступ для элемента H3 в виде margin-bottom: 9px, и двигаться дальше. Но это не позволит масштабировать элемент. Когда пользователь увеличит размер шрифта в браузере, вертикальный размер веб-страницы будет испорчен, поскольку H3 увеличится в размерах, но сохранит всё те же самые 9 пикселей нижнего отступа.
Формула для вычисления множителя em:
требуемый размер в пикселях / текущий размер в пикселях = множитель
Значит, для нашего H3 примера: 9/24 = .375
Рекомендуем использовать EmChart всё время для преобразования дизайна в X HTML/CSS шаблоны. Эта таблица весьма полезна для расчёта высоты нижних полей margin-bottom, высоты линии line-height (которые безразмерны, но формула по-прежнему применяется), верхних полей margin-top, и среди прочего, верхних/нижних padding отступов. Также очень удобно для сохранения переносимости размера шрифта font-size.
Полезные статьи и заметки по теме: