Скриншот AtoZ CSS: свойство CSS Line-Height

Я создам container и добавлю в 400x400 изображение размером 400x400 . Теперь я добавлю заголовок внутри с текстом. Этот оверлейный заголовок будет помещен поверх изображения с position:absolute а затем получит полупрозрачный фон. Поскольку я знаю высоту изображения и контейнера изображения, я могу использовать line-height для вертикального центрирования текста внутри блока.

У этого метода есть один маленький недостаток: если текст слишком длинный и переносится на несколько строк, высота каждой из этих строк составит 400px и текст будет переполнен.

Для альтернативного подхода к вертикальному выравниванию, обратите внимание на «Эпизод 22: Вертикальное выравнивание в CSS» .

Проект Wide Spacing

Мы видели, как line-height может контролировать расстояние между строками текста в абзаце. Мне нравится тщательно выбирать это значение и использовать его в качестве основы для большей части пространства на сайте.

Я часто устанавливаю font-size умолчанию и line-height в body которое затем будет каскадно проходить через все мои текстовые элементы. line-height может быть указана в пикселях, ems, rems, процентах или может быть оставлена ​​без единиц измерения. С помощью безлинной line-height , которая является моим предпочтением, все элементы получают вертикальный интервал их размера шрифта, умноженного на мой «фактор расстояния». Я часто использую 1,5 в качестве моего фактора, но так как он преимущественно установлен в одном месте, его легко изменить.

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

Если мой font-size умолчанию равен 16px тогда все абзацы будут иметь line-height :

 1.5 * 16 = 24px 

Если мой font-size h1 умолчанию равен 2em то он будет иметь эквивалентный размер шрифта 48px и эквивалентную line-height 48px

 16 * 2 = 32px 32 * 1.5 = 48px 

Я бы продолжил использовать этот коэффициент 1,5 на всем остальном сайте. Я бы добавил поле 1.5em под заголовками, абзацами, списком, элементами списка и входными данными формы. Если бы я хотел большего пространства между элементами, я бы 1.5em свои 1.5em до 3em . Если бы я хотел меньше места — возможно, для заполнения кнопок или ввода формы, я мог бы 0.75em его вдвое до 0.75em или на четверть до 0.375em . Цель игры состоит в том, чтобы поддерживать постоянный фактор.

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

Разработка этого множителя интервалов, вероятно, является одной из самых важных вещей, которые нужно сделать в начале нового проекта. Если какие-то конкретные элементы необходимо отдалить от «магического фактора», это вполне выполнимо, но я думаю, что всегда разумно установить хорошую прочную основу, а затем опираться на нее, вместо того, чтобы каждый раз набирать все на глаз, когда есть риск того, что вещи не выстроятся в линию или будут несовместимы со страницы на страницу.

Быстрая подсказка

Теперь, в этом кратком совете по бонусам, мы рассмотрим сокращение для настройки font-size и line-height вместе, чтобы сэкономить пару дополнительных нажатий клавиш.

line-height , как обсуждалось в оригинальном скринкасте , является свойством для установки высоты линии в CSS. Это похоже (но немного отличается) от лидирующего в дизайне печати.

Совет 1

line-height применяется только к элементам, для которых их display установлено как inline или inline-block и фактически устанавливает высоту линейного блока, который ограничивает элемент. Если вы установите line-height для блочного элемента, вы все равно можете увидеть некоторые изменения в ваших стилях, но на самом деле это затрагивает inline дочерние элементы, так как line-height является унаследованным свойством.

При установке line-height без единицы измерения (как я рекомендую в видео), вычисленное значение представляет собой line-height умноженную на font-size текущего элемента.

 { font-size: 20px; font-family: 'Avenir', sans-serif; line-height: 1.5; /* 30px */ } 

Совет 2

Если вам нужно установить одновременно line-height и font-size , есть удобное сокращение с помощью свойства font .

Этот сокращенный font-variant позволяет установить font-style font-variant , font-variant , font-weight , font-size , line-height и font-family в одной строке.

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

 { font: 20px/1.5 'Avenir', sans-serif; } 

При использовании этого сокращенного синтаксиса важен порядок объявления.

1. Семейство font-family должно быть последним объявлением
2. Высота line-height должна следовать сразу за font-size и быть разделена косой чертой /
3. font-style , font-variant и font-weight должны быть определены до font-size и line-height .

Полный пример использования всех доступных свойств шрифта может выглядеть следующим образом:

 { /* style | variant | weight | size/line-height | family */ font: italic small-caps 700 20px/1.5 'Avenir', sans-serif; }