Почему нет единицы для (EM * высота строки) или (REM * корневая высота строки)?

Эта проблема действительно беспокоила меня некоторое время.

В Интернете (и в средах CSS, таких как Bootstrap) REMобычно используется для всего, от отступов (пример: padding: 2rem;) до радиуса границы (пример: border-radius: 1rem;).

Ладно, это разумно. Но почему нет глобальной единицы, включающей модификатор line-height? Предполагая, что вы используете типичную сетку, основанную на типографике, масштабирование вашего шрифта ПЛЮС ваш интерлиньяж является вашей истинной базовой линией, и, таким образом, кажется, что это НАМНОГО более важная единица, чем просто простой REM.

Например, скажем, ваш REMустановлен на 16px, а ваш основной текст line-height. 1.6:

body {
  font-size: 16px;
  line-height: 1.6;
}

Это относительно распространенная конфигурация. Так почему же REM(что обычно будет интерпретироваться как 16pxв этом примере) используется почти везде, а не единица измерения, представляющая фактическую базовую линию сетки (которая обычно будет 25.6pxили 16px * 1,6)?

Другими словами, почему эта стандартная практика

my-padding: {
   padding: 2rem; // typically will be 32px;
}

но не это

my-padding: {
   padding: 2rlh; // typically will be 51.2px;
}

(Я понимаю rlh, что или root line heightне существует в CSS. Мой вопрос: почему его не существует?).

Я немного смущен вашим вопросом... Вы также можете использовать rems или любую допустимую единицу CSS для высоты строки, разве это не решает вашу проблему?
@ Кай, я не понимаю, что ты имеешь в виду. Проблема не в установке высоты строки. Проблема в том, что нет эквивалента для REMвысоты строки.
Я не знаю, что вы имеете в виду, что эквивалентно rem для высоты строки? Если вы используете rem для установки высоты строки, то ваш гипотетический rlh такой же, как при использовании rem. Например, вы устанавливаете line-height: 2rem;then padding: 4rem;так же, как делаетеpadding: 2rlh;
Это должно быть в веб-мастерах или в основном стеке?
@DigitalLightcraft Нет, здесь все в порядке. Там 236 вопросов с тегом CSS.
@Cai Кажется , я понимаю, что ты имеешь в виду. Конечно, вы можете установить что угодно вручную. Но это ломается, если изменяется высота строки. Именно поэтому с самого начала существует REM. На самом деле, я думаю, что добавляю путаницы, потому что мой вопрос может относиться EMкак к REM. Если я хочу установить заполнение относительно родителя font-size * line height, для этого нет единицы, кроме жесткого кодирования значений.
@yourfriendzak Ничего не сломается, если вы используете REM. Проблема заключается в использовании безразмерной высоты строки, что рекомендуется, если вам не нужна согласованная базовая сетка , о которой вы говорите, верно? В этом случае вы устанавливаете высоту строки с помощью REM, и ваши REM также будут относительно вашего базового уровня.
Проблема с безразмерной высотой строки заключается в том, что она зависит от размера шрифта, поэтому то, что вы предлагаете, является относительной единицей относительной единицы.
@Cai Хммм, это интересно. Я не подумал об этом. Мне придется переосмыслить свою предпосылку. Спасибо за продуманные ответы.
указание высоты строки без единицы измерения означает "ems". Итак, 1,2 высоты строки = 1,2 em.
Стандартный ответ на вопрос «Почему в CSS отсутствует этот параметр, который является общим для графических дизайнеров и набора текста?», заключается в том, что «группе стандартов CSS не хватает графических дизайнеров и наборщиков».
Тем не менее ... это немного запутанный вопрос. Какова ваша конечная цель? Я считаю, что REM уже является именно тем, что вам нужно. «Высота строки» + «Интерлиньяж» = любой REM, который вы хотите.

Ответы (1)

Причина этого в том, что он слишком специфичен, чтобы оправдать стоимость.

В вашем конкретном случае, когда вы хотите использовать root line-height, ответ также заключается в том, что в большинстве случаев the line-heightоснован на font-size(это по умолчанию), поэтому это было бы бесполезно, поскольку у нас уже есть rem.

В более общем смысле мы можем спросить себя: «Что, если я хочу использовать корень в качестве интервала для остальных полей и отступов? Почему для этого margin-topнет единицы ?» rmtи сделайте это для любого свойства. Мы быстро видим, что глупо иметь единицы для каждого свойства. emи remбыли выбраны на основе , font-sizeпотому что это обеспечивает хорошую основу для других свойств, которые можно стилизовать.

При этом, если вы хотите использовать высоту строки (или любое другое значение) в значениях других свойств, вы можете использовать либо настраиваемые свойства CSS (по сути, переменные) , либо использовать препроцессор CSS, такой как SASS или LESS.

Почему нет единицы для (EM * высота строки) или (REM * корневая высота строки)?
СпросиСетьПолитика конфиденциальности1y, 0v