Единица 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 в
результате выполнения следующего кода:
Определите, какой размер шрифта и отступа
в 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 заимствован из мира типографики, и это единица, которая позволяет установить размер шрифта элемента относительно размера шрифта его родителя.
.родительский { размер шрифта: 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, теперь у нас действительно проблемы!
Итак, как видите, эффект единиц em может складываться, когда несколько элементов с размером шрифта em находятся внутри друг друга. Это может стать проблемой и привести к непредвиденным последствиям в ваших проектах.
Эта проблема является причиной создания модуля rem.
Единица rem, сокращенно от root em, является относительной единицей, которая всегда будет основываться на значении размера шрифта корневого элемента, которым является элемент . А если Элемент не имеет указанного размера шрифта, используется браузер по умолчанию 16 пикселей.
Таким образом, это означает, что при использовании модуля rem значения родительских элементов игнорируются, и принимается во внимание только значение корня.
Аналогичный пример, но в вещах:
.html { размер шрифта: 16px; }.parent { размер шрифта: 15 пикселей; }.child-rem { размер шрифта: 2rem; }parent "> Я 15px child-rem "> У меня 32 пикселя, как и ожидалось child-rem "> У меня 32 пикселя, ага! child-rem "> У меня 32px, как по маслу!
Как видите, использование единиц rem позволяет нам избежать эффекта наложения единиц em. С rem все всегда и последовательно основано на размере шрифта или корневом элементе, так что никаких сюрпризов.
То же самое относится и к другим значениям, кроме размера шрифта (поля, отступы и т. д.). Использование единиц rem для них по-прежнему будет относиться к размеру шрифта корневого элемента.
На самом деле нет лучшего устройства, и все зависит от ваших личных предпочтений. Некоторым людям нравится проектировать все в единицах rem для согласованности и предсказуемости, в то время как другим нравится также использовать единицы em в тех местах, где влияние ближайших родительских элементов имеет смысл.
Единицы CSS — px, em, cm, vw, in, ex, pt, pc — TutorialBrain
Единицы CSS
Единицы CSS содержат различные единицы, которые представляют собой способы выражения длины.
Свойства, такие как Ширина , Высота , . .
На более высоком уровне единицы могут иметь –
Числовые значения – Длина имеет номер, за которым следует единица, например 10px , 5mm , 8in и т. д. Между числом и единицей измерения не должно быть пробела, т.е. — значение будет в процентах, например 70%, 30% и т. д.
На более низком уровне единицы состоят из:
Давайте разберемся с обоими подробно.
1. Абсолютная длина
Абсолютные длины — это те единицы длины, значение которых фиксировано для всех устройств.
Эти длины не подходят для экранов с низким разрешением, таких как компьютеры, поскольку большинство компьютеров имеют сравнительно низкое разрешение, и в идеале вам следует избегать их использования на вашем веб-сайте (кроме «px», который является приличной единицей длины)
широко используемые абсолютные единицы длины —
px – Stands for Pixels
pt – Full form is Points
pc – Shorthand for Picas
in – Stands for Inches
cm – Полная форма для сантиметров
мм – Сокращенное обозначение миллиметров
q – Обозначения для
Четверть миллиметров (Редко используется на веб-сайтах )0008
Предупреждение/Примечание/Информация
Абсолютные единицы, такие как pt , pc , in , см , мм и q могут незначительно различаться на экранах с низким разрешением (менее 200 dpi), но они не будут отличаться на экранах с высоким разрешением ( более 200 dpi). В то время как пикселей специально разработан для размера шрифта CSS, и это исключение в абсолютной длине. Его длина зависит от типа устройства, поэтому он подходит для отображения, например, на экранах компьютеров.
Подписаться на @tutorial_brain
Длина пикселей (px)
px означает пикселя . Это в основном разработано для CSS, и это одна из наиболее часто используемых абсолютных длин.
Хотя это относится к абсолютной длине, ее длина зависит от типа устройства, и по этой причине даже W3C рекомендует использовать единицу измерения пикселей для экрана дисплея. В некоторых случаях вы также можете использовать его для устройств печати, таких как принтеры.
96px = 1in
Синтаксис длины «px»: property_type: mpx ;
Где «
м» может быть любым числовым значением с десятичной или без десятичной точки.
W3C не рекомендует единицу длины в пунктах для экрана дисплея, но рекомендует ее для устройств печати, таких как принтеры.
12pt = 1pc
Синтаксис длины «pt»: property_type: xpt ;
Где « x» может быть любым числовым значением с десятичной или без десятичной точки.
Например: ширина: 72pt; высота: 12pt;
Пример длины в пунктах (pt)
.p-pt {
размер шрифта: 20pt;
цвет:зеленый;
}
Длина в пиках (шт.)
шт. означает пика или пика.
W3C не рекомендует единицу длины Pica/s для экрана дисплея, но рекомендует ее для устройств печати, таких как принтеры.
1 шт. = 12 пунктов 6 шт. = 2,54 см 6 шт. = 1 дюйм
Синтаксис длины ‘ПК’: property_type: npc ;
Где « n» может быть любым числовым значением с десятичной или без десятичной точки.
Например: ширина: 6 шт.; высота: 1 шт.;
Пример длины в Pica(pc)
.p-pica {
размер шрифта: 3 шт.;
цвет:зеленый;
}
Длина в сантиметрах (см)
см означает сантиметр . Он широко используется в повседневных целях, но реже используется при разработке веб-сайтов.
W3C не рекомендует единицу длины в сантиметрах для экрана дисплея, но рекомендует ее для устройств печати, таких как принтеры.
1 см = 10 мм 2,54 см = 1 дюйм
Синтаксис длины «см»: property_type: acm ;
Где « a» может быть любым числовым значением с десятичной запятой или без нее.
Например: ширина: 3см; высота: 2,5 см;
Пример длины в сантиметрах (см)
.п-см {
размер шрифта: 1 см;
цвет:зеленый;
}
Длина в миллиметрах (мм)
мм означает мм . Это 1/10 сантиметра.
W3C не рекомендует единицу измерения длины миллиметра для экрана дисплея, но рекомендует ее для устройств печати, таких как принтеры.
10 мм = 1 см 25,5 мм = 1 дюйм
Синтаксис длины в мм: property_type: bmm ;
Где « b» может быть любым числовым значением с десятичной или без десятичной точки.
Например: ширина: 20 мм; высота: 15 мм;
Пример длины в миллиметрах (мм)
.p-мм {
размер шрифта: 4 мм;
цвет:зеленый;
}
Длина в дюймах (дюймах)
в означает дюйма .
W3C не рекомендует единицу измерения в дюймах для экрана дисплея, но рекомендует ее для устройств печати, таких как принтеры.
1 дюйм = 96 пикселей 1 дюйм = 2,54 см
Синтаксис длины «in»: property_type: zin ;
Где « z » может быть любым числовым значением с десятичной запятой или без нее.
Например: ширина: 0,5 дюйма; ширина границы: 0,1 дюйма
Пример длины в дюймах (дюймах)
.p-in {
размер шрифта: 0,5 дюйма;
цвет:зеленый;
}
Соотношение между дюймами, см, мм, pt, pt и px
1 дюйм = 2,54 см = 25,4 мм = 72 точки = 6 шт. = 96 пикселей
2. Относительная длина
Как следует из названия, Relative единиц длины — это те длины, которые относятся к другой длине.
Относительная длина — это те единицы длины, значения которых НЕ фиксированы на всех устройствах.
Относительная длина подходит для экранов с низким разрешением, таких как экраны компьютеров.
Широко используемые единицы относительной длины –
em — относительно размера шрифта текущего элемента
ex – Относительно высоты x шрифта
% – Относительно окружающего родительского элемента в процентах
ch — Относительно ширины цифры «0»
rem — Разбить как r + em т. е. Root em . Относительно размера шрифта корневого элемента документа HTML
vw — Относительно 1% ширины окна просмотра (Размер браузера)
vh — Относительно 1% высоты окна просмотра (Размер браузера)
vmin — Относительно 1% ширины или высоты области просмотра, в зависимости от того, что меньше между vw и vh
vmax — относительно 1% ширины или высоты области просмотра, в зависимости от того, что больше между vw и vh
Единица CSS em
em не имеет полной формы. Это единица измерения относительно размера шрифта текущего элемента, поэтому она может быть разной для каждого элемента HTML-документа.
Допустим, у вас есть элемент с размером шрифта 2см, тогда 1em для этого элемента будет 2см. Точно так же, если у вас есть другой элемент с размером шрифта 3 дюйма, то 1em для этого элемента будет равен 3 дюймам.
Для больших экранов размер шрифта будет выглядеть больше, а для меньших экранов размер шрифта будет относительно меньше.
Это единственный блок, который W3C рекомендует для экрана дисплея, а также для устройств печати, таких как принтеры.
Единица em обычно используется с padding , margin , text-indent и т. д.
Где « a » может быть любым числовым значением с десятичной запятой или без нее.
Например: отступ текста: 3em; Маржа : 2 в
Пример единицы em
div {
размер шрифта: 40px;
фон: красный;
}
.а {
размер шрифта: 1em;
ширина: 8em;
фон: желтый;
}
.б {
размер шрифта: 0.5em;
фон: синий;
}
Предупреждение/Примечание/Информация
Если вы не закодируете размер шрифта для вашего текущего элемента, то 1 см будет приблизительно равен 2,37 em, т.е. 1 см = 2,37 em и 1 em = 16 пикселей (по умолчанию)
Пример единицы ’em’, когда размер шрифта текущего элемента не установлен
. p-cm {
размер шрифта: 1 см;
цвет:зеленый;
}
.п-эм {
размер шрифта: 2,37 em;
цвет:зеленый;
}
.p-px {
размер шрифта: 37,92 пикселя; /*2,37 * 16 пикселей */
цвет:зеленый;
}
Длина CSS ex
Единица измерения ex относится к высоте x шрифта.
Высота x равна высоте строчных букв, таких как x, a, c, m, или или одинакового размера.
Это редко используется, и W3C не рекомендует это для экранов дисплеев, а также для принтеров.
Синтаксис «ex» length: property_type: bex ;
Где «b » может быть любым числовым значением с десятичной или без десятичной точки.
Например: ширина: 2ex;
Пример длины «ex»
p {
высота строки: 16 пикселей;
размер шрифта: 40px;
поле: 15 пикселей;
}
отметка {
размер шрифта: 1ex;
}
охватывать {
размер шрифта: 2ex;
}
Длина в процентах (%)
Единица % относится к окружающему родительскому элементу в процентах.
Допустим, ширина родительского элемента текущего элемента составляет 100 пикселей. Теперь, если вы определите ширину текущего элемента как 80%, тогда значение ширины будет 0,8*100 пикселей = 80 пикселей.
вы можете использовать этот блок в нескольких свойствах CSS, так как нет фиксированного правила, но одно место, где он используется чрезмерно, — это %keyframes анимации.
Синтаксис длины ‘%’: property_type: x% ;
Где « x» может быть любым числовым значением с десятичной или без десятичной точки.
Например: ширина: 20%;
Пример длины ‘%’
.parent {
размер шрифта: 50px;
фон: желтый;
}
.ребенок {
размер шрифта: 60%;
фон: зеленый;
}
Канал CSS Единица измерения
Единица ch относится к ширине числа «0».
Синтаксис длины ‘ch’: property_type: ych ;
Где « y » может быть любым числовым значением с десятичной запятой или без нее.
Например: ширина: 2ч;
Пример ‘ch’ Unit
body {
размер шрифта: 40px;
фон: серый;
}
.а {
размер шрифта: 1ch;
фон: зеленый;
}
.б {
размер шрифта: 2ch;
фон: синий;
}
.с {
размер шрифта: 3ch;
фон: оранжевый;
}
CSS rem
Блок rem является корневым em . Это относительно размера шрифта по умолчанию корневого элемента HTML-документа.
Итак, если размер шрифта корневого элемента равен 18px, то 1rem = 18px , что будет одинаковым для всех элементов, определенных с помощью rem единиц.
Он стал частью CSS в 2013 году и даже лучше, чем em , но некоторые старые браузеры его не поддерживают.
В ближайшие годы это будет самая популярная единица измерения, так как она напрямую зависит от базового размера шрифта.
Синтаксис единицы измерения «рем»: тип свойства: крем ;
Где « k » может быть любым числовым значением с десятичной запятой или без нее.
Например: ширина: 5рем;
Пример блока ‘rem’
html {
размер шрифта: 18px;
фон: желтый;
}
.а {
размер шрифта: 1rem;
фон: зеленый;
}
.б {
размер шрифта: 2rem;
фон: синий;
}
.с {
размер шрифта: 3rem;
фон: оранжевый;
}
Предупреждение/Примечание/Информация
Если вы не закодируете размер шрифта для своего корневого элемента, то 1rem будет примерно равен 16px, т.е. 1rem = 16px
Пример ‘rem’, когда размер шрифта корня не установлен
.a {
размер шрифта: 1rem;
}
.б {
размер шрифта: 16 пикселей;
}
.с {
размер шрифта: 2rem;
}
.д {
размер шрифта: 3rem;
}
CSS vw length
Единица vw — это относительная единица, которая составляет 1% от ширины области просмотра, а область просмотра — это размер окна браузера. Он отличается от браузеров к браузерам.
Проще говоря, это 1/100 ширины окна просмотра.
Это означает, что значение единицы vw будет продолжать изменяться, как только вы продолжаете изменять ширину окна браузера.
Синтаксис длины «vw»: property_type: xvw ;
Где » x » может быть любым числовым значением с десятичной или без десятичной точки.
Например: ширина: 10vw;
Пример длины vw
.p-vw {
размер шрифта: 8vw;
цвет:зеленый;
}
vh length
Единица измерения vh — это относительная единица, равная 1% высоты окна просмотра (размер окна браузера).
Проще говоря, это 1/100 высоты окна просмотра.
vh не поддерживается в некоторых старых браузерах.
Синтаксис длины vh: property_type: xvh ;
Где » x » может быть любым числовым значением с десятичной запятой или без нее.
Например: ширина: 10вх;
Пример длины ‘vh’
.p-vh {
размер шрифта: 14vh;
цвет:зеленый;
}
vmin и vmax length
vmin — это относительная длина, которая будет минимальной из vw и vh , поэтому она будет составлять 1% ширины области просмотра ( vw) v w если меньше vh , в противном случае это будет 1% от высоты области просмотра ( vh ).
Аналогично, vmax — это относительная длина, которая будет максимальной из vw и vh , поэтому она будет составлять 1% от ширины окна просмотра ( vw) , если vw больше, чем vh , иначе это будет 1% высоты окна просмотра ( vh ).
Синтаксис длины vmin: property_type: avmin ;
Синтаксис длины vmax: property_type: bvmax ;
Где « a » и « b » могут быть любыми числовыми значениями с десятичной запятой или без нее.
Например: ширина: 10vmin; высота: 10vmax;
Пример длины ‘vmin’ и ‘vmax’
.vmin {
размер шрифта: 6vmin;
цвет:зеленый;
}
.vmax {
размер шрифта: 6vmax;
высота строки: 12 пикселей;
}
безразмерная длина
Вы можете пропустить единицу, если длина может быть безразмерной.
Например: Если вы хотите установить отступ как 0 пикселей или 0 см и т.
1)
5
В этом случае размер
отступа будет вычисляться от размера шрифта
абзаца, а не его родителя:
5em;
}
Однако мы можем добиться большего.
Это может стать проблемой и привести к непредвиденным последствиям в ваших проектах.
С rem все всегда и последовательно основано на размере шрифта или корневом элементе, так что никаких сюрпризов.
д. Между числом и единицей измерения не должно быть пробела, т.е. — значение будет в процентах, например 70%, 30% и т. д.
p-px {
размер шрифта: 15px;
цвет:зеленый;
}
Это 1/10 сантиметра.
е. Root em . Относительно размера шрифта корневого элемента документа HTML
p-cm {
размер шрифта: 1 см;
цвет:зеленый;
}
.п-эм {
размер шрифта: 2,37 em;
цвет:зеленый;
}
.p-px {
размер шрифта: 37,92 пикселя; /*2,37 * 16 пикселей */
цвет:зеленый;
}
