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


CSS line-height Свойство

Пример

Задайте высоту линии для различных элементов

Подробнее примеры ниже.

Определение и использование

Свойство line-height указывает высоту линии.

Примечание: Отрицательные значения не допускаются.

Значение по умолчанию: normal
Inherited: yes
Animatable: yes. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.lineHeight=»30px»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
line-height 1.0 4.0 1.0 1.0 7.0

Синтаксис CSS

Значения свойств

Значение Описание
normal Обычная высота линии. Это значение по умолчанию
number Число, которое будет умножено на текущий размер шрифта для установки высоты линии
length Фиксированная высота линии в пикселах, PT, cm и т.д.
% Высота строки в процентах от текущего размера шрифта
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Задайте высоту линии в пикселах и сантиметрах для различных элементов

Пример

Задайте высоту линии как число для различных элементов

CSS свойство line-height

Устанавливает межстрочный интервал текста, отсчет ведется от базовой линии шрифта. В обычных условиях браузер автоматически определяет это значения, основываясь на виде и размере шрифта. Отрицательное значение межстрочного расстояния не допускается.

CSS синтаксис

Возможные значения

Значение Описание
normal Значение по умолчанию. Межстрочное расстояние устанавливается браузером.
множитель Число, используемое в качестве множителя от текущего размера шрифта.
значение Устанавливает фиксированное межстрочное расстояние, заданное в единицах длины CSS, — пиксели (px), сантиметры (cm), пункты (pt) и т.д.
% Устанавливает межстрочное расстояние в процентах от текущего размера шрифта.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример №1

Устанавливаем межстрочное расстояние в процентах

Пример №2

Межстрочное расстояние устанавливается при помощи числовых значений

line-height

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

В CSS межстрочным интервалом (интерлиньяжем) называется расстояние между базовыми линиями двух соседних строк. А базовая линия — это воображаемая линия, проходящая по нижнему краю символов. Некоторые буквы (щ, ц, у, д, р, ф) частично выходят за нее.

Межстрочный интервал — line-height.

Тип свойства

Применяется: ко всем элементам, но оно не будет иметь результата для замещаемых элементов (например, изображений), у которых высота задается свойством height.

Значения

Значением свойства line-height является указание размеров межстрочного расстояния одним из следующих способов:

  • normal — межстрочное расстояние вычисляется браузерами исходя из размера шрифта элемента. Как правило, оно равно размеру шрифта или больше его на 20%.
  • Размеры — расстояние в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения запрещены.
  • Число — Любое положительное целое или дробное число. В этом случае расстояние между строк равняется размеру шрифта (font-size) умноженному на это число.
  • Проценты — значение в процентах (%), где за 100% берется размер шрифта элемента. Отрицательные значения (-20%) указывать нельзя.
  • inherit — наследует значение line-height от родительского элемента.

Процентная запись: относительно размера шрифта элемента.

Значение по умолчанию: normal.

Синтаксис

Пример CSS: использование line-height

Результат. Использование свойства CSS line-height.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

Высота строки CSS

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

line-height: normal | | | | inherit

normal Расстояние между строчками вычисляется браузером самостоятельно

line-height: 1.5; = font-size * 1.5 = 20px * 1.5 = line-height: 30px; [если font-size: 20px;]

Текст легче читать, при значении от 1.5 до 2 [w3.org].

Любые единицы измерения: px, em, rem, sm. %

inherit Наследуется значение родителей

Чем отличается line-height от height или padding

padding — это отступ от height до границы элемента.

height: auto; (по умолчанию) — это:

2. если присутствует текст, то сумма line-height всех строк
3. если есть дочерние элементы, то сумма их height, border, padding и margin

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Line-height и vertical-align — это простые CSS свойства. Они настолько просты, что большинство из нас убеждено в том, что в полной мере понимают, как они работают и как их использовать. Но это не так. В действительности же они сложны. Можно даже считать, что они являются самыми сложными свойствами, т.к. они играют важную роль в создании мало известной особенности CSS: в строчном форматировании текста.

Например, line-height может быть установлен в качестве длины или безразмерного значения, но по умолчанию у него задано значение normal. Окей, но что такое normal? Пишут, что чаще всего это 1 или может даже 1.2. Но даже в спецификации по CSS нет ясного ответа на этот вопрос. Мы знаем, что line-height — безразмерное свойство относительно родительского значения font-size, но проблема заключается в том, что font-size: 100px выглядит по разному, в зависимости от семейства шрифта. Вопрос: значение line-height всегда одинаковое или разное? Действительно ли значение варьируется между 1 и 1.2? А vertical-align? Каково его влияние в отношении line-height?

Глубокое погружение в CSS не такой простой механизм…

Давайте сперва поговорим о font-size

Посмотрите на простой HTML код. Тег p содержит три span , каждый из которых имеет свой собственный font-family :

Используя некоторое значение font-size с различными font-family, мы получаем элементы разной высоты:

Разные font-family, одинаковое значение font-size, получаем разную высоту элементов

Почему font-size: 100px не создает элементы с высотой в 100px? Я измерил и получилось:

  • Helvetica — 115px;
  • Gruppo — 97px;
  • Catamaran — 164px.

Элементы со значением font-size:100px имеют разную высоту

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

  • шрифт определяется его em-квадратом (или единицей em) своего контейнера, в котором будет нарисован каждый символ. Этот квадрат использует относительные единицы и обычно устанавливает значение на уровне 1000 единиц. Но здесь также может применяться значение 1024, 2048 и т.д.
  • устанавливается на основе своих относительных единиц, показателей шрифтов (ascender, descender, capital height, x-height и т.д.). Обратите внимание, что некоторые значения могут выходить за пределы em-квадрата.
  • в браузере относительные единицы масштабируются, чтобы нужный размер соответствовал шрифту.

Давайте возьмем шрифт Catamaran и откроем его в FontForge, чтобы получить его показатели:

  • em-квадрат 1000;
  • Ascender — 1100 и Descender — 54. После выполнения некоторых тестов, окажется, что браузеры используют значения HHead Ascent/Descent на Mac OS, а также значения Ascent/Descent на Windows (эти значения могут отличаться!). Отметим также, что прописная буква имеет высоту 640px и высота обычной буква составляет 485px.

Значения шрифта в FontForge

Это значит, что шрифт Catamaran использует 1100 + 540 единиц при 1000 единиц в em-квадрате, который дает высоту 164px, в то время, как в настройках указано font-size: 100px . Эта вычисленная высота определяется как контент-область (content-area) элемента и я буду использовать этот термин далее в этой статье. Вы можете думать о контент-области, как об области, для которой применяется свойство background .

Мы также можем увидеть, что заглавные буквы имеют высоту 68px (680 единиц) и строчные буквы (x-height) — 49px (485 единиц). В результате, 1ex = 49px и 1em = 100px, а не 164px (к счастью, em основан на размере шрифта, а не на вычисленной высоте).

Шрифт Catamaran: эквивалент UPM и пикселей при использовании font-size: 100px

Прежде чем идти дальше, оставлю некоторое пояснение. Когда элемент p> отображается на экране, то он может состять из нескольких линий, в соответствии с его шириной. Каждая строка состоит из одного или нескольких inline-элементов (HTML-теги или встроенные imline-элементы для текстового содержимого) и имеет название line-box. Высота line-box основана на высоте его дочерних элементов. Таким образом, браузер вычисляет высоту для каждого inline-элемента, и, следовательно, высоту line-box (от высшей точки своего дочернего элемента к самой нижней точке своего дочернего элемента). В результате line-box — достаточно высок, чтобы содержать все свои дочерние элементы (по умолчанию).

Каждый HTML-элемент на самом деле является неким множеством, состящим из line-boxes. Если вы знаете высоту каждого line-box, Вы знаете высоту элемента.

Если обновить предыдущую страницу HTML код, то получим:

Он будет генерировать три line-boxes:

  • первый и последний, каждый из которых содержит единственный встроенный элемент (содержание текста)
  • второй, содержащий два встроенных элемента и три span>

Тег (черная рамка) сделана из line-boxes (белые границы), которые содержат inline-элементы (сплошные границы) и анонимные inline-элементы (пунктирные границы)

Мы ясно видим, что второй line-box выше остальных, в связи с вычисленной контент-областью его дочерних элементов, один из которых использует шрифт Catamaran.

Трудным в создании line-box является то, что мы не можем видеть и управлять им с помощью CSS. Даже применяя background с псевдоклассом : : first-line не дает нам ни какой визуальной подсказки о высоте line-box.

line-height: к проблемам и за ее пределами

Ранее я ввел два понятия: контент-область (content-area) и line-box. Если вы читали внимательно, то я сказал, что высота line-box вычисляется в соответствии с его дочерней высотой, я не сообщал дочерним элементам высоту их контент-области. В этом и заключается больше различие.

Хотя это может показаться странным, inline-элемент имеет две разные высоты: высоту content-area и высоту virtual-area (Я изобрел термин virtual-area , обозначая таким образом высоту, невидимую для нас. Этого термина Вы не найдете в спецификации).

  • высота content-area определяется показателями шрифта (как показано выше)
  • высота virtual-area — это line-height , а также это высота, которая используется для вычисления высоты line-box

Inline-элементы, имеющие две разные высоты

Это ломает распространенное мнение о том, что line-height это расстояние между базовыми линиями (baselane). В CSS это не так.

В CSS, the line-height — это не расстояние между двумя базовыми линиями

Рассчитанная разность высот между virtual-area и content-area называется ведущей. Половина этой ведущей добавляется к верхней части content-area, другая часть — к нижней. Content-area располагается всегда в центре virtual-area.

На основе его значений, line-height (virtual-area) может быть больше, меньше или равной content-area. В случае меньшего размера virtual-area, ведущее значение станет отрицательным и line-box стане визуально меньше его дочернего элемента.

Существуют также другие виды inline-элементов:

  • inline-элементы ( img> , input> , svg> , etc.)
  • inline-block и все inline-* элементы
  • inline-элементы, которые используются в качестве форматирования текста (например, во flexbox-элементах)

Для этих inline-элементов, высота вычисляется на основе height , margin и border . Если height имеет значение auto , то line-height используется в content-area и строго равна line-height .

Inline замещаемые элементы, inline-block/inline-* и blocksified inline элементы имеют контент-область, равную их высоте или высоте линии

Итак, вернемся к FontForge. Em-квадрат шрифта Catamaran равен 1000, но мы видим значения ascender/descender:

  • Ascent/Descent: ascender — 770 и descender — 230. Используется для символьных рисунков. (табл. “OS/2”)
  • показатели Ascent/Descent: ascender — 1100 и descender — 540. Используется для высоты content-area. (табл. “hhea” и табл. “OS/2”)
  • показатель Line Gap. Используется дл line-height : normal , путем добавления этого значения показателей Ascent/Descent. (табл. “hhea”)

В нашем случае, шрифт Catamaran определяет разрыв в 0 единиц для line gap, поэтому line-height : normal будет равен content-area, который составляет 1640 единиц, иначе 1.64.

В качестве сравнения, шрифт Arial описывает em-квадрат в 2048 единиц, ascender — 1854, descender — 434 и line gap составляет 67. Это означает, что font-size : 100px дает content-area — 112px (1117 единиц) и line-height : normal — 115px (1150 единиц, иначе 1.15). Все эти показатели шрифта устанавливаются разработчиком шрифта.

Становится очевидным, что установка line-height : 1 плохая практика.Я хотел бы напомнить вам, что безразмерное значение относительно для font-size и virtual-area меньше, чем content-area. Именно это и является источником многих наших проблем.

Используя line-height: можно создать line-box меньше, чем контент-область

Уточнения о вычислении line-box:

  • для inline-элементов, padding и border увеличивают область фона, но не высоту content-area (или высоту line-box).Сontent-area — это не всегда то, что ты видишь на экране. margin-top и margin-bottom не имеют ни какого эффекта.
  • для inline-элементов, inline-block и blocksified inline-элементы: padding , margin и border увеличивают height , а значит увеличивают content-area и высоту line-box

vertical-align: свойство, которое управляет всеми


Я еще не упомянул о свойстве vertical-align , несмотря на то, что оно важно для вычисления высоты line-box. Можно даже сказать, что vertical-align играет ведущую роль в форматировании текста.

Значение по умолчанию — baseline . Помните о показателях шрифта ascender и descender? Эти значения определяют, где базовая линия стоит, а значит определяет и ее соотношение. Т.к. соотношение между ascenders и descenders редко бывает 50:50.

Тег p> с двумя span> унаследовал значения font-family , font-size и имеют постоянный line-height . Базовые линии (baselines) будут соответствовать и высота line-box будет равна их line-height .

Те же значения шрифта, одинаковые исходные условия, кажется, что все в порядке

Что делать, если второй элемент имеет меньший font-size ?

Как ни странно, но по умолчанию базовая линия может выровнять выше (!) line-box так, как показано на картинке. Я хотел бы напомнить вам, что высота line-box вычисляется от самой высокой точки своего дочернего элемента к низшей точке своего дочернего элемента.

Меньший дочерний элемент может привести к увеличении высоты line-box

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

Рассмотрим еще один пример. Тег p> с line-height : 200px , содержащий один span> , унаследовал значение line-height

Насколько высок line-box? Следует ожидать, что 200px, но это не так. Проблема здесь заключается в том, что p> имеет свой собственный font-family (по умолчанию serif ). Базовые линии тега p> и span> скорее всего, будут различны, а высота line-box выше, чем ожидалось. Это происходит потому, что браузеры производят вычисления следующим образом: так, как если бы каждый line-box начинался бы с нулевой ширины символа.

В итоге, мы столкнулись с той же проблемой, что и в предыдущем примере.

Каждый дочерний элемент выравнивается так, как если бы его line-box появился бы с невидимой нулевой ширины символа

Базовая линия скачен, но что можно сказать на счет vertical-align : middle ? Как пишут в спецификации, middle “выравнивает вертикальную среднюю точку контейнера с базовой линией родительского контейнера плюс половина x-height родительского блока”. Соотношение базовых линий различны, а также как различно соотношение x-height, следовательно выравнивание middle не надежно. Как правило, middle никогда не бывает по “середине”. Этому способствуют много факторов в CSS (x-height, ascender/descender соотношение, и тд.)

В качестве примечания:

  • vertical-align : top / bottom выравнивает по верху и низу line-box
  • vertical-align : text-top / text-bottom выравнивает по верху и низу content-area

Vertical-align: top, bottom, text-top и text-bottom

Но используйте с осторожностью, это выравнивает virtual-area. Посмотрите это на простом примере, используя vertical-align : top . Невидимый line-height может привести к странным, но не удивительным, результатам.

vertical-align может привести к нечетным результат на первых порах, но предполагается, что line-height создаст визуализацию

И в заключении стоит отметить, что vertical-align также принимает числовые значения, которые повышают или понижают поле относительно базовой линии.

CSS превосходен

Мы поговорили о том, как line-height и vertical-align работают вместе, но теперь вопрос: можно ли управлять показателями шрифта с помощью CSS? Короткий ответ: нет.

Что делать, если, например, мы хотим, чтобы текст с помощью шрифта Catamaran, где высота заглавной буквы 100px стал выше? Давайте немного займемся математикой.

Сначала мы устанавливим все показатели шрифта в качестве CSS-свойств, а затем вычислим font-size ,чтобы получить высоту заглавной буквы 100px.

Высота заглавной буквы — 100px

Довольно просто, не так ли? Но что, если мы хотим, чтобы текст визуально стоял по середине? Так чтобы оставшееся пространство равномерно распределялось по верхней и нижней части буквы «B»? Для достижения этой цели, мы должны вычислить vertical-align базирующийся на соотношении ascender/descender.

Во-первых, установим line-height : normal и высоту content-area:

Затем нам нужно установить:

  • расстояние от нижней части буквы к нижнему краю
  • расстояние от верхней части буквы к верхнему краю

Теперь мы можем вычислить vertical-align , которая представляет собой разность между расстояниями, умноженное на величину font-size . (мы должны применить это значение для дочернего элемента inline)

В конце концов, мы устанавливаем желаемый line-height и вычисляем его при сохранении вертикального выравнивания:

Результат установки для line-height разных значений. Текст всегда располагается по середине.

Добавить значок, высота которого соответствует букве «B», теперь легко:

Иконка и буква B имеют одинаковую высоту

Обратите внимание, что это демо предназначено только для демонстрационных целей. Почему? На это есть много причин:

  • показатели шрифта могут быть не постоянными ¯⁠\⁠(ツ)⁠/⁠¯
  • если шрифт не загружен, то резервный шрифт, верноятно, будет иметь различные показатели шрифта и иметь дело с несколькими значениями, а значит — станет не управляемым.

CSS Свойство line-height

Пример

Указать высоту строки в процентах :

p.small p.big

Попробуйте сами »

Еще примеры внизу этой страницы.

Определение и Использование

Свойство line-height указывает высоту строки.

Замечание: Отрицательные значения не допустимы.

Значение по умолчанию: normal
Наследуется: да
Версия: CSS1
JavaScript синтаксис: объект.style.lineHeight=»2″

Поддержка Браузерами

Свойство line-height поддерживается всеми основными браузерами.

Замечание: Значение «inherit» не поддерживается в IE7 и более ранних версиях. IE8 требует объявления !DOCTYPE. IE9 поддерживает «inherit».

Значения Свойства

Значение Описание
normal Обычная высота строки. Используется по умолчанию
число Число, которое будет умножено на текущий размер шрифта для определения высоты строки
высота Фиксированная высота строки в пикселах, пунктах, сантиметрах, и т.д.
% Высота строки в процентах от текущего размера шрифта
inherit Указывает, что значение свойства line-height должно наследоваться от родительского элемента

Попробуйте сами — Примеры

Указать расстояние между строками, используя значение в пикселах
Этот пример демонстрирует, как указать расстояние между строками в параграфе, используя значение в пикселах.

Указать расстояние между строками с использованием числового значения
Этот пример демонстрирует, как установить расстояние между строками в параграфе, используя числовое значение.

Обзор свойства line-height в CSS-стилях

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

Но, прежде чем мы начнем рассматривать свойство line-height более детально, мы должны дать пояснение двум важным моментам: область содержимого элемента (content-area) и коробка строки (line-box).

Область содержимого элемента (content-area) – это вычисленная высота области содержимого элемента. На размер области содержимого влияют такие свойства, как box-sizing , width , min-width , max-width , height , min-height и max-height . Вы можете представить себе область содержимого как область, которая содержит текст или графические элементы, для которых суммируются все вышеуказанные свойства.

Коробка строки (line-box). Каждая строка состоит из одного или нескольких встроенных элементов (HTML-тегов). Высота коробки строки зависит от высоты своих потомков. Браузер вычисляет высоту для каждого встроенного элемента и, следовательно, высоту строки (от самой высокой точки ее потомка до самой нижней точки ее потомка). Поэтому, коробка строки всегда имеет достаточную высоту, чтобы вместить все ее дочерние элементы (по умолчанию). Каждый элемент HTML представляет из себя набор таких «коробок». Если вы знаете высоту каждой коробки строки, тогда вы будете знать высоту этого элемента.

И одним из свойств, которые влияют на высоту коробки строки, является line-height (т.е., высота строки). Поскольку высота строки может быть выше высоты области содержимого, представьте себе свойство line-height как свойство, которое определяет виртуальную высоту элемента. Виртуальную, поскольку пространство, которое выше области содержимого, является невидимым.

Графически это можно представить так:

Высота области содержимого, кроме прочего, определяется размером шрифта.

Высота, определенная в line-height , используется для вычисления высоты строки и коробки строки.

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

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

Встроенные элементы, на которые влияют эти правила:

  • замененные встроенные элементы ( , , и т. д.)
  • блоки со свойством inline-block
  • встроенные элементы, которые участвуют в конкретном контексте форматирования (например, в элементе flexbox все flex элементы блокируются)

Для этих конкретных встроенных элементов высота вычисляется на основе их значений height , margin и border . Если значение для height установлено в auto , тогда используется line-height , а область содержимого становится строго равной высоте строки.

Теперь осталось разобраться с проблемой, каково должно быть нормальное значение line-height ? Не рекомендуется использовать line-height: 1; поскольку единичные значения (безразмерные) являются относительными по размеру шрифта, а не относительными по отношению к области содержимого. И очень часто это приводит к тому, что высота строки (виртуальная область) будет меньшей за область содержимого.

Если проанализировать шрифты из Google Web Fonts, то мы увидим, что более 90% из них имеют высоту строки ( line-height ) больше, чем 1. Поэтому, желательно использовать немного большие значения за 1.

Дополнительные сведения о вычислении коробки строки:

  • для встроенных элементов, padding и border увеличивают область фона, но не высоту области содержимого (и не высоту коробки строки). Поэтому область содержимого не всегда такова, какой она выглядит на экране. Свойства margin-top и margin-bottom не имеют влияния.
  • для замененных встроенных элементов ( , , и т. д.), блоков с inline-block : padding , margin и border увеличивают height , а значит и высоту области содержимого и высоту коробки строки.

Межстрочный интервал line-height | CSS

Высота строки CSS

Чем отличается line-height от height или padding

padding — это отступ от height до границы элемента.

height: auto; (по умолчанию) — это

  1. height: 0;
  2. если присутствует текст, то сумма line-height всех строк [см. пример выше с расчётами]
  3. если есть дочерние элементы, то сумма их height , border , padding и margin

Изменить line-height:
Изменить height:

Расстояние между строк HTML

Междустрочный интервал можно узнать, если из line-height вычесть font-size . Причём значение межстрочного расстояния делится на два. Одна половина увеличивает отступ от буквы до верхнего края, другая — до нижнего. То есть получается, что текст располагается ровно по середине блока.

line-height наследуется от предка к потомку

Значение, заданное потомку, будет главнее того, что задано родителю.

Изменить line-height Зелёного потомка:
Изменить line-height Синего потомка:

Значение единственное, которое отталкивается от значения font-size элемента, а не от его родителя.

значение line-height в

line-height и HTML тег span

Элемент с display: inline; не может иметь height . Поэтому, ежели line-height родителя меньше line-height дочернего элемента, строчный потомок увеличивает высоту строки предка, на которой он находится. Между line-height нескольких строчных элементов, находящихся на одной строке, также выбирается то, что больше.

Изменить line-height родителя:
Изменить line-height строчного потомка:

‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it . The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. [w3.org]

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

Изменить line-height:
Изменить font-size:

Свойство CSS line-height

Описание и использование

Свойство CSS line-height задает расстояние между строками.

Заметка: запрещены отрицательные значения свойства.

Значение по умолчанию normal
Наследование да
Версия CSS CSS 1
Синтаксис JavaScript object.style.lineHeight=»2″

Поддержка в браузерах

Свойство line-height поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

text-align, line-height

Когда мы пишем текст, он всегда изначально выравнивается по левому краю, но с помощью CSS мы можем изменять выравнивание. Для этого необходимо использовать CSS-свойство, которое называется «text-align».

Изначально задается свойство «left», то есть оно не задано, оно предполагается. Если мы хотим сделать что-нибудь другое, то мы пишем «text-align: right», сохраняем, смотрим, и текст выравнивается по правому краю.

Ещё одно значение, которое мы можем задать – это «text-align: center», тогда текст выравнивается по центру.

Есть ещё одно интересное значение этого свойства – «justify». Это когда текст выравнивается по ширине.

Итак, мы можем выровнять текст по центру, по левому краю, по ширине контента, по правому краю и просто пропустить это свойство. Собственно, вот такое очень простое CSS-свойство. Ничего сложного с ним нет, поэтому поедем дальше.

В этом же уроке давайте затронем ещё одно CSS-свойство, тоже очень простое, ничего сложного в нем нет. Оно называется «line-height». Это высота строки, то есть мы можем изменять высоту строки.

Так же, на будущее, вы можете с помощью этого свойства выравнивать текст по высоте. Для этого напишем следующий пример:

Допустим, вы делаете кнопку, и вам нужно текст разместить по центру. Допустим, это какая-то кнопочка «Отправить».

Этот код сделает для нас вот такую кнопочку:

То есть с помощью «line-height: center», «text-align: center» вы можете выравнивать текст по центру какого-то блока.

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

Всё, на этих двух свойствах мы останавливаемся, поехали дальше двигать блоки и изучать маргины и паддинги.

Чтобы пройти тестирование, необходимо войти или зарегистрироваться

Топ-пост этого месяца:  Пример создания диаграммы для Vue js с использованием функций реального времени
Добавить комментарий