Действительно ли CSS ems представляет размер шрифта?

Question

Из того, что я знаю, ключевое слово em в CSS означает текущий размер шрифта.

Итак, если вы положили 1,2 em, это означает 120% от высоты шрифта.

Это не кажется правильным, однако, что эм используется для установки ширины дивы и т.д., как YUI сетки делает:

margin-right:24.0769em;*margin-right:23.62em; 

Everytime Я читал о эм, я забыл, что это на самом деле представляет.

Я надеюсь, что кто-то сможет объяснить это мне, чтобы он пал в моей голове.

Answer 1

Исторически это ширина шрифта «М» в шрифте. Отсюда и имя! В CSS2.1 он равен defined, чтобы быть таким же, как и размер шрифта.

Во многих случаях кажется более естественным использовать em, а не точки или пиксели, поскольку это относительно размера шрифта. Например, вы можете определить текстовый столбец шириной 40 м. Если позже вы решите изменить размер шрифта, столбец будет по-прежнему содержать одинаковое количество букв в строке.

Answer 2

Это означает размер шрифта, но использование его для ширины/высоты полезно для создания проектов, размер которых зависит от размера шрифта. Это становится менее полезным сейчас, когда большинство браузеров могут делать полноэкранное масштабирование. Раньше, когда они могли только изменять размер текста, использование em для width/height позволило бы этим элементам также масштабироваться.

Answer 3

Они пересчитывают точные значения пикселей до em, чтобы сделать их масштабируемыми.

См. Это on-line calculator например.

Answer 4

Традиционно em является шириной верхнего регистра M. На практике, однако, em является размером точки шрифта.

em dash versus en dash.

Answer 5

Размер em пропорционален содержащему его элементу.

Например:

<!-- Browser default size (usually 16px) --> 
<div style="font-size: 1.00em;"> 
    <!-- 150 % of the container's size: 16 + (16/2) = 24 --> 
    <div style="font-size: 1.50em;"> 

This editor держит это в виду, для меня (о том, как она работает).

Answer 6

Эта статья очень полезна, если вы используете размеры, указанные в EMS: How to size text using ems