CSS от А до Я: как задать свойство line-height

CSS от А до Я: как задать свойство line-height

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе со свойством line-height.

L значит line-height

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

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

Совет 1

Свойство line-height применяется только к элементам со свойством display со значениями inline или inline-block и задает высоту строчного блока вокруг элемента. Если задать свойство 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-style, font-variant, font-weight, font-size, line-height и font-family в одной строке. Код выше можно переписать в одно сокращенное свойство font:

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

В таком синтаксисе очень важен порядок объявления.

Свойство font-family должно идти последним.

Свойство line-height должно идти следом за font-size и быть отделено от него символом /.

Свойства 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;
}

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree