Кто-нибудь может приятно объяснить, что такое «em» (размерная единица измерения CSS)?

Question

Может кто-нибудь приятно объяснить, что такое em как единица измерения CSS?

А когда мы используем em в качестве единицы размера для веб-сайта, зачем использовать% для тела? Почему бы не использовать em для тела?

Answer 1

Лучший способ узнать, что это такое, - взглянуть на стандарт CSS .

Здесь вы можете видеть, что он определен как размер шрифта рассматриваемого элемента, то есть он связан с высотой шрифта для элемента. Размер шрифта не является измерением какой-либо конкретной буквы. Фактическая высота отдельных букв может быть больше или меньше размера шрифта, хотя обычно они будут меньше. От Википедия :

В цифровом типе отношение высоты отдельных букв к em произвольно устанавливается конструктором гарнитуры. Однако, как очень грубый ориентир, «средний» шрифт может иметь высоту колпачка 70% от em и высоту x 48% от em.

Еще одна вещь, которую следует отметить в стандарте CSS:

Единственным исключением из этого правила является свойство 'font-size', где значения 'em' и 'ex' относятся к размеру шрифта родительского элемента.

Это исключение имеет смысл, в противном случае вы получите рекурсивное определение размера шрифта.

Обычно используемое, но неправильное определение - это ширина рассматриваемой буквы «М». Раньше это было определено так в типографии, но в наши дни это уже не так, и никогда не было так для CSS. Буква «М» на самом деле часто меньше ширины, чем 1 эм (это, конечно, зависит от шрифта).

Answer 2

РЕДАКТИРОВАТЬ: Я исправлен: в CSS он определен как размер шрифта согласно ответу Марка Байерса.

(Изначально это была ширина буквы M. См. http://en.wikipedia.org/wiki/Em_%28typography%29. Сравните ex, то есть высоту x.)

Answer 3

Em, предположительно, представляет ширину буквы 1 M, но на практике это текущий размер шрифта.

Ems являются относительными, так что если вы делаете:

table { font-size: 2em }
td { font-size: 2em }

Текст в ваших тд будет в четыре раза больше основного текста, так как размер шрифта таблицы в два раза больше основного, а размер шрифта тд в два раза больше, чем в таблице.

p { margin-bottom: 1em }

Под абзацами теперь будет один разрыв строки, равный высоте одной строки текста. (Буквы, как правило, будут короче линии, но вы поймете идею.)

Answer 4

У вас уже есть понимание 'em' из существующих ответов, но никто из них не заметил еще одну вещь.

С их помощью вы можете создавать так называемый «эластичный» макияж. Это означает, что если вы укажете все размеры блоков в em, то ваш сайт сохранит свои пропорции после того, как пользователь нажмет 'Ctrl +' (или, возможно, другую комбинацию в некоторых браузерах для увеличения размера шрифта).

Answer 5

«Em» равно «x раз текущий шрифт, который использует пользовательский агент».

Это означает, что, если посетитель использует шрифт 10pt по умолчанию, 1em равен 10pt, 2em равен 20pt и т. Д.

Дополнительную информацию о различных единицах CSS можно найти здесь: http://www.w3schools.com/css/css_units.asp

Answer 6

В CSS «em» - это способ выразить размер относительно размера шрифта. «1 em» означает «тот же размер, что и текущий шрифт». «1.5 em» означает, что размер элемента примерно в 1-1 / 2 раза больше размера шрифта.

Все так хорошо масштабируется.

См .: Ссылка на единицу длины CSS

Answer 7

Из Википедия :

Em - это единица измерения в области типографики. Эта единица определяет соотношение ширины и высоты буквы по отношению к размеру точки текущего шрифта. Первоначально единица была получена из ширины заглавной буквы "М" в конкретном шрифте. Эта единица не определена в терминах какой-либо конкретной гарнитуры и, следовательно, одинакова для всех шрифтов с заданным размером шрифта. Итак, 1 эм в 16-ти точечном шрифте равен 16 точкам.