Содержание

em | CSS | WebReference

  • Содержание
    • Пример
    • Спецификация
    • Браузеры

Единица em соответствует значению свойства font-size элемента. Если это значение не задано, тогда берётся значение font-size родителя.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>em</title> <style> div { font-size: 20px; /* Размер шрифта в пикселях */ padding: 1em; /* Поля вокруг текста */ border: 2px solid #ccc; /* Параметры рамки */ border-radius: .5em; /* Радиус скругления */ } </style> </head> <body> <div>Роджерс первым ввел в научный обиход понятие «клиент», так как перцепция начинает потребительский код.</div> </body> </html>

В данном примере параметры блока устанавливаются через единицу em, при этом размер, относительно которого считается em, задан через свойство font-size.

Спецификация

Спецификация Статус
CSS Values and Units Module Level 4 Рабочий проект
CSS Values and Units Module Level 3 Возможная рекомендация
CSS Level 2 Revision 1 (CSS 2. 1)
Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

3 12 1 3. 5 1 1
2.0 4 10.1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

См. также

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.09.2019

Редакторы: Влад Мержевич

Отступы и единицы em в CSS

Пусть у нас есть следующие теги:

<div> <p> text </p> </div>

Пусть размер шрифта абзаца задан в px:

p { font-size: 20px; }

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

p { font-size: 20px; margin: 2em; /* соответствует 40px */ }

Пусть теперь абзацу задан размер в

em:

div { font-size: 20px; } p { font-size: 2em; /* соответствует 40px */ }

Давайте опять зададим margin нашему элементу. В этом случае он по-прежнему будет рассчитываться от текущего значения шрифта самого элемента. При этом само значение шрифта будет рассчитываться относительно родителя:

div { font-size: 20px; } p { font-size: 2em; /* соответствует 40px */ margin: 2em; /* соответствует 80px */ }

Пусть у нас есть HTML код, для которого мы будем решать задачи:

<section> <div> <p> text </p> </div> </section>

Определите, какой размер шрифта и отступа в px будут иметь теги div в результате выполнения следующего кода:

section { font-size: 10px; } div { font-size: 2em; margin: 2em; }

Определите, какой размер шрифта и отступа в px будут иметь теги div в результате выполнения следующего кода:

section { font-size: 10px; } div { font-size: 2em; margin: 3em; }

Определите, какой размер шрифта и отступа в px будут иметь теги div в результате выполнения следующего кода:

section { font-size: 10px; } div { font-size: 2em; margin: 0. 5em; }

Определите, какой размер шрифта и отступа в px будут иметь теги p в результате выполнения следующего кода:

section { font-size: 10px; } div { font-size: 2em; } p { font-size: 2em; margin: 2em; }

Определите, какой размер шрифта и отступа в px будут иметь теги p в результате выполнения следующего кода:

section { font-size: 10px; } div { font-size: 1.5em; } p { font-size: 1em; margin: 1.5em; }

бэр vs em Единицы измерения в CSS. У нас есть много хороших вариантов, когда дело доходит до… | Хоссам Хилал

У нас есть много хороших вариантов, когда дело доходит до единиц измерения в CSS. В современном мире адаптивного дизайна относительные единицы, такие как единицы em или rem, дают нам адаптируемость и гибкость прямо из коробки, что позволяет определять размеры на основе размеров шрифта, определенных выше в разметке.

Вы, вероятно, уже некоторое время используете единицы измерения em и rem, но вам может быть интересно, в чем разница между ними и какая единица лучше

  • em Единицы измерения свойства font-size будут относиться к размеру шрифта родительского элемента.
  • единиц em для других свойств, кроме размера шрифта, будут относиться к размеру шрифта текущего элемента. Размеры единиц
  • rem всегда будут относиться к размеру шрифта корневого элемента html . подходит для ваших вариантов использования. Разберем его как можно короче.
  • Используйте REM для размеров и интервалов.
  • Используйте EM для медиа-запросов.

Пиксели (px) — это то, к чему мы все привыкли за эти годы. Все знают, что такое пиксель (хотя размер пикселя не всегда одинаков, но это в другой раз). Всем удобно использовать пиксели. Они легко переводимы. Дизайнеры, как правило, работают с пикселями, поэтому размеры можно брать непосредственно из Photoshop прямо для сборки.

Так что же не так с пикселями?

Я большой сторонник доступности в Интернете. В любой день я бы предпочел доступность «красивости».

Если вы устанавливаете все размеры шрифта, размеры элементов и интервалы в пикселях, вы неуважительно относитесь к конечному пользователю.

В большинстве браузеров пользователь может установить размер шрифта браузера по умолчанию, отличный от размера по умолчанию (обычно 16 пикселей). Если пользователь устанавливает значение по умолчанию 20 пикселей, все размеры шрифтов должны масштабироваться соответствующим образом.

Однако, если веб-сайт явно устанавливает размер шрифта в пикселях, заголовок, установленный на 30px, всегда будет 30px. Это может звучать здорово с точки зрения дизайнера/разработчика, но вы не пользователь, перестаньте делать сайты для себя.

К счастью, установка размера шрифта в пикселях не полностью нарушает доступность. Пользователь по-прежнему может увеличивать и уменьшать масштаб с помощью Ctrl Plus +/- (cmd вместо Ctrl в OS X). Однако мы можем добиться большего.

em заимствован из мира типографики, и это единица, которая позволяет установить размер шрифта элемента относительно размера шрифта его родителя.

Возьмем простой пример:

.parent { font-size: 18px; } .child { размер шрифта: 1.5em; }

 .родительский { 
размер шрифта: 18 пикселей;
} .child {
размер шрифта: 1,5 em;
}

В этом примере

дочерний элемент будет иметь размер шрифта 27 пикселей (1,5 * 18 пикселей = 27 пикселей).

Если родительский элемент не указывает значение размера шрифта, значение будет искаться выше в дереве DOM. Если размер шрифта не указан вплоть до корневого элемента ( ), то используется браузер по умолчанию 16 пикселей.

Довольно просто и понятно, верно? Однако единицы em можно использовать не только для установки размера шрифта, но и практически везде, где ожидаются единицы измерения:

  • padding
  • margin
  • width
  • height
  • max-width

Когда единицы em используются для других свойств, а не для собственного font-size, значение относится к элементу font-size.

Добавим к нашему примеру:

 .parent { 
размер шрифта: 18px;
}.child {
размер шрифта: 1.5em;
прокладка: 2em 1em;
}
  • Отступы сверху и снизу на .child будут 54px. Это в 2 раза больше размера шрифта нашего текущего элемента (2 * 27px)
  • Отступы слева и справа на .child будут иметь размер 27px. Это в 1 раз больше размера шрифта нашего элемента.

когда для размера шрифта используются единицы em, размер определяется относительно размера шрифта родителя. При использовании в других свойствах он зависит от размера шрифта самого элемента.

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

Сохраним аналогичный базовый пример:

 .parent { 
размер шрифта: 15 пикселей;
}.child {
размер шрифта: 2em;
}

Но давайте использовать его в нашей разметке следующим образом:

 parent  "> 
I'm 15px
child ">
I'm 30px, как и ожидалось
< divld ih">child ">
У меня 60 пикселей, начинаются проблемы!
child ">
Я 120px, теперь у нас действительно проблемы!