line-height — CSS | MDN

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

/* Keyword value */
line-height: normal;
/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;
/* <length> values */
line-height: 3em;
/* <percentage> values */
line-height: 34%;
/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

Свойство line-height задаётся с помощью:

  • <числа>
  • <величины>
  • <процентного соотношения>
  • ключевого слова normal.

Значения

normal

Зависит от пользовательского браузера.

Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно 1.2, в зависимости от элементов font-family.

<число> (без именования)

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

<величина>

Указанная <величина>

используется при вычислении высоты блока строки. Значение, заданное в единицах em может привести к непредвидимым результатам (смотри пример ниже).

<процентное соотношение>

Относительно размера шрифта самого элемента.Relative to the font size of the element itself. The computed value is this <percentage> multiplied by the element’s computed font size. Percentage values may produce unexpected results (see the second example below).

Формальный синтаксис

line-height = 
normal               | (en-US)
<number>             | (en-US)
<length-percentage>  
"><length-percentage> = 
<length>      | (en-US)
<percentage>

Basic example

 
/* All rules below have the same resultant line height */
div { line-height: 1.2;   font-size: 10pt; }   /* number */
div { line-height: 1.2em; font-size: 10pt; }   /* length */
div { line-height: 120%;  font-size: 10pt; }   /* percentage */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */

It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.

Prefer unitless numbers for line-height values

This example shows why it is better to use <number> values instead of <length> values. We will use two <div> elements. The first, with the green border, uses a unitless line-height value. The second, with the red border, uses a line-height value defined in ems.

CSS
.green {
  line-height: 1.1;
  border: solid limegreen;
}
.red {
  line-height: 1.1em;
  border: solid red;
}
h2 {
  font-size: 30px;
}
.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}
HTML
<div>
 <h2>Avoid unexpected results by using unitless line-height.</h2>
  length and percentage line-heights have poor inheritance behavior ...
</div>
<div>
 <h2>Avoid unexpected results by using unitless line-height.</h2>
  length and percentage line-heights have poor inheritance behavior . ..
</div>
<!-- The first <h2> line-height is calculated from its own font-size   (30px × 1.1) = 33px  -->
<!-- The second <h2> line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want -->
Result
SpecificationStatusComment
CSS Transitions
Определение ‘line-height’ в этой спецификации.		Рабочий черновикDefines line-height as animatable.
CSS Level 2 (Revision 1)
Определение ‘line-height’ в этой спецификации.		РекомендацияNo change.
CSS Level 1
Определение ‘line-height’ в этой спецификации.		РекомендацияInitial definition.
Начальное значениеnormal
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсяда
Процентыотносятся к размеру шрифта самого элемента
Обработка значениядля процентов и значений длин, абсолютной длины, если другое не указано
Animation typeчисло или длина

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • font, font-size

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

line-height | CSS | WebReference

Для блочных элементов определяет минимальную высоту строки текста. Для внедряемых строчных элементов (вроде <img>) свойство line-height не оказывает никакого эффекта. Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.

Краткая информация

Значение по умолчаниюnormal
НаследуетсяДа
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис

line-height: <множитель> | <размер> | <проценты> | normal
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.
<время>#

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1. 5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берётся высота шрифта.

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

Песочница

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

div {
  line-height: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>line-height</title> <style> h2 { line-height: 70%; } p { line-height: 1.5; } </style> </head> <body> <h2>Нормальный постулат: алгебра или наибольшее и наименьшее значения функции?</h2> <p>Эпсилон окрестность, исключая очевидный случай, поддерживает комплексный интеграл по бесконечной области.
</p> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства line-height

Объектная модель

Объект.style.lineHeight

Примечание

Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм.

Спецификация

СпецификацияСтатус
CSS TransitionsРабочий проект
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

4121711
1161
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Текст и шрифт

Рецепты

  • Как задать расстояние между пунктами списка?

CSS: можно ли установить межстрочный интервал без высоты строки?

Задавать вопрос

спросил

Изменено 5 лет, 3 месяца назад

Просмотрено 1к раз

Я знаю о line-height свойство и все самое интересное, что мы можем с ним сделать, но можно ли настроить межстрочный интервал каким-то другим способом?

В Adobe InDesign, например, высота строки и межстрочный интервал — это два отдельных свойства, которые можно настраивать независимо друг от друга.

Прямо сейчас я работаю над дизайном, используя очень хороший Garamond, но настройка высоты строки на хороший разборчивый уровень также делает такие вещи, как ссылки и подчеркивания, очень уродливыми. Простые подчеркивания с text-decoration выглядят нормально, но в идеале я хотел бы иметь возможность сделать подчеркивания более визуально ошеломляющими и интерактивными, как на веб-сайте HuffPost. Они используют коробка-тень . Тень блока, нижняя граница и все подобное будут привязаны к нижней части высоты строки.

Можем ли мы иметь оба с CSS?

ПРИМЕР:

Обычное подчеркивание с использованием text-decoration: underline;

Граница «подчеркнута» с использованием border-bottom: 1px сплошная $special-blue; На мой взгляд, слишком далеко от текста. Даже при умеренно консервативной высоте строки 1.4rem

8

Я нашел это решение, где вы можете установить высоту строки на 1 для этого конкретного элемента. Это сбрасывает высоту строки для этого элемента, но не влияет ни на что другое в этой строке.

, делая вот так,

 p. new a{
  текстовое оформление: нет;
  дисплей: встроенный блок;
  нижняя граница: 1px сплошной зеленый;
  высота строки: 1;
}

JS Fiddle

Я считаю, что нет двух разных свойств для высоты строки и интервала.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Интервал между строками HTML/CSS

[2 ответа] Задавать вопрос

спросил

Изменено 1 год, 3 месяца назад

Просмотрено 470 раз

У меня есть следующие два фрагмента кода с веб-сайта, с которым я возился. Я пытаюсь внести изменения в линии, и я изо всех сил пытаюсь это сделать. Идея состоит в следующем:

«Javascript»

4+ года

«HTML»

3+ года

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

Редактировать: Пожалуйста, попробуйте предоставить решение, которое не потребует 20 столбцов div/оберток или испортит позиционирование столбцов. Спасибо!

HTML: 

 

       
Языки программирования
 
      Java более 4 лет 

      SQL - 2+ года 

      JavaScript – 2 года 

       
Инструменты
 
    

    <дел>
      Python – 2 года 

      C# — от 1 года 

      C++ - 1 год
<дел> HTML ~ 1 год
CSS ~ 1 год
Баш ~ 1 год