Единицы измерения em и ex

Сначала, однако, рассмотрим em и ex. В CSS один «em» – это значение свойства font-size заданного шрифта. Если для элемента font-size равен 14 пикселам, тогда для него же 1em равен 14 пикселам. Очевидно, что это значение может меняться от элемента к элементу. Например, возьмем h1, размер шрифта которого составляет 24 пиксела, элемент h2, размер шрифта которого составляет 18 пикселов, и абзац со шрифтом в 12 пикселов. Если задать левый отступ в 1em для всех трех элементов, то отступ слева для них будет 24, 18 и 12 пикселов соответственно:

h1 {font-size: 24px;}
h2 {font-size: 18px;}
p {font-size: 12px;}
h1, h2, p {margin-left: 1em;}
small {font-size: 0.8em;}

Left margin = 24 pixels


Left margin = 18 pixels


Left margin = 12 pixels



При задании размера шрифта значение em вычисляется относительно размера шрифта родительского элемента. С другой стороны, величина ex опирается на высоту буквы x нижнего регистра выбранного шрифта. Поэтому, если в двух абзацах размер текста составляет 24 пункта, но для каждого абзаца выбран свой шрифт, то значение ex для каждого из них может быть различным. Дело в том, что высота буквы «x» в разных шрифтах разная. В примерах текст имеет высоту 24 пункта, и, следовательно, значение em каждого примера составляет 24 пункта, но x-высота (высота глифов строчных букв) каждого из них разная.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
URL
Абсолютные единицы измерения длины
Единицы измерения CSS2
Единицы измерения длины
Измерение длин в пикселах