Line-height в rem в html элементе никак не реагирует на font-size, почему?

Question

Николай Шабалин @nikolayshabalin

Автор профессиональных курсов в HTML Academy

HTML

Line-height в rem в html элементе никак не реагирует на font-size, почему?

Суть вот в чём. Есть html элемент

<html>
  ...
</html>

который является корневым для rem.

Rem зависит от font-size в html, но почему-то не в самом html. Вот я и думаю почему?

html {
  font-size: 14px;
  line-height: 2rem; //32px
}

html {
  font-size: 15px;
  line-height: 2rem; //32px
}

Я знаю, что по умолчанию font-size на html равен 16px, но не понятно почему rem не смотрит в мой font-size равный другому значению.

Какие у вас мысли господа?

Вопрос задан более трёх лет назад
752 просмотра

Комментировать

Подписаться 2 Простой Комментировать

Решения вопроса 1

7 комментариев

Сергей delphinpro @delphinpro Куратор тега HTML

:root — и есть элемент html =)

На самом деле суть в том, что если rem указывается для корневого элемента, то для расчета значения используется initial value, которое в большинстве браузеров равно шестнадцати пикселям, что мы и видим в примере автора вопроса.

Написано более трёх лет назад
Николай Шабалин @nikolayshabalin Автор вопроса

Сергей, спасибо за дополнение, а есть где подробнее почитать? Откуда такие догадки?

Написано более трёх лет назад
Николай @iNickolay

Сергей, я не совсем правильно выразился:
Псевдокласс :root определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу , но в стилях приоритет :root выше, чем у селектора html.
(c)
Николай Шабалин, Ещё раз: грубо говоря, при использовании в html {} он обращается к корневому элементу выше себя, т.е. к самому себе) А там дефолтное значение шрифта - стандартное для браузера, чаще всего 16рх )

Написано более трёх лет назад
Николай Шабалин @nikolayshabalin Автор вопроса

Николай, значит почитаю про :root. Спасибо большое!

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега HTML

Николай Шабалин, догадки? Это не догадки, это выдержка из спецификации html. Правда не точная цитата, лень искать было, написал по памяти, но суть передана точно. Искать, соответственно, на сайте w3c.

Николай, У вас малюсенькое заблуждение. Или путаница понятий. Выражение но в стилях приоритет :root выше, чем у селектора html. не означает, что выше элемента html в разметке есть что-то мифическое. Там ничего нет. Это написано по отношению к стилям и означает лишь то, что запись :root { color:red } будет иметь больший приоритет, чем html { color: green; }. Указывать они будут на один и тот же элемент.
при использовании в html {} он обращается к корневому элементу выше себя, т.е. к самому себе — тут вы опять вводите свои формулировки, неверные. Верно описать происходящее будет именно так, как я написал. И это не одно и то же.

Читайте спецификации, там много интересного =))

Написано более трёх лет назад
Николай @iNickolay

Николай Шабалин, Не за что )

Сергей, "что выше элемента html в разметке есть что-то мифическое. Там ничего нет. " - Читайте внимательней ответ, именно это я и хотел донести)
И я же написал "грубо говоря", просто попытался объяснить на пальцах)
Вот раз спецификация, а вот два. Подтверждений ваших слов не нашёл :(

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега HTML

Николай, ищите в разделе про единицы измерения

Написано более трёх лет назад