line-height — расстояние между строками

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

12.0+ 4.0+ 1.0+ 1.0+ 7.0+ 1.0+

Описание

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

В CSS свойство line-height устанавливает высоту всей строки текста, поэтому разница между размером шрифта (font-size) и высотой строки (line-height

) соответствует межстрочному интервалу. Увеличение значения свойства line-height приводит к увеличению расстояния между строками текста.

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

Примечание: по умолчанию во всех браузерах межстрочный интервал равен 120-125% от размера текущего шрифта. Использование отрицательных значений не допускается.

Для регулирования расстояний между словами используйте CSS свойство word-spacing, для изменения расстояния между буквами — letter-spacing.

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

Синтаксис

line-height: normal|число|высота|inherit;

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

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

Пример

line-height:

normal

1

2

3

4

0px

1px

2px

10px

25px

50%

100%

120%

150%

200%

Пример демонстрирует, как с помощью свойства line-height можно изменять расстояние между строк текста.

div {
line-height: normal;
}

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

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

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

А что может быть дороже удобства посетителя сайта?

Видеоверсия:

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

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

Межстрочный интервал

На иллюстрации выше вы можете видеть высоту строки, обозначаемую как line-height.

Непосредственное расстояние между ними принято называть leading.

Например, если мы зададим расстояние между строками равное 24 пикселям, а размер шрифта 16 пикселям, то leading у нас будет равняться 8 пикселям (24-16).

Допустимые значения

В качестве значений можно использовать все те же пиксели, em и проценты, с которыми мы познакомились в уроке по размеру шрифтов. Например, давайте попробуем установить межстрочный интервал в 24 пикселя.

body { line-height: 24px; }

Как видите, все довольно просто. Однако, в подобной записи есть недостаток. Заключается он в том, что в будущем при изменении размера текста нужно не забыть поменять интерлиньяж.

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

body { line-height: 150%;
line-height: 1.5em; }

Как видно на примере выше, можно использовать как проценты, так и em. Они абсолютно равнозначны.

Лучшее решение

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

Например, дадим шрифтам тега body размер в 12 px, и интерлиньяж в 150 процентов. Значит, конечное значение будет равняться 18 пикселю.

Далее, поменяем кегль текста в абзацах на 20 px. В этом случае, межстрочный интервал будет не 30 px (18*1.5), как ожидалось, а останется 18 px, который был унаследован от тега body.

Множитель

Для задания интервала между строками лучше использовать множитель — простое числовое значение, которое, между прочим наследуется надлежащим образом.

body { line-height: 1.5; }

В данном примере, межстрочное расстояние всегда будет в полтора раза больше размера текста. Даже при наследовании.

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

А на этом у меня все. Смею предположить что вам все понятно, если нет — задавайте свои вопросы в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.

Закрыть

css — Изменение интервала между абзацами и внутри абзацев

спросил

6 лет, 3 месяца назад

Изменено 6 месяцев назад

Просмотрено 117 тысяч раз

Я нашел похожую тему, но не могу найти конкретный CSS для изменения в WordPress. Если вы зайдете на мою домашнюю страницу. Или блог.

Я хочу изменить интервал внутри и между абзацами и не уверен, какой элемент мне нужно изменить в моем CSS.

Я нашел свойство line-height для .body , но, похоже, это не то, что я хочу.

  • css
  • пробел
  • абзац

2

Между абзацами вы должны установить отступ для этого элемента. Между строками внутри абзаца можно использовать высота строки . Например:

 р {
  высота строки: 32px; /* внутри абзаца */
  нижняя граница: 30px; /* между абзацами */
  }

1

Добавление поля margin-bottom: 30px делает свое дело, но вы также более или менее привязаны к отступу следующего элемента под вашим последним абзацем, чтобы также начать с интервала 30px. Интервал между абзацами, скорее всего, будет соответствовать высоте строки самого абзаца (или быть близким), что может отличаться от интервала между элементами следующего типа.

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

 р {
    высота строки: 32px;
    &: не (: последний ребенок) {
        нижняя граница: 30px;
    }
}
// или пробел сверху с родственным селектором:
п {
    высота строки: 30 пикселей;
    + п {
        поле сверху: 32px;
    }
}
////
// или если высота строки и интервал между абзацами совпадают:
////
$p-line-height: 30px;
п {
    высота строки: $p-высота строки;
    &: не (: последний ребенок) {
        нижняя граница: $p-line-height;
    }
}
// с пробелом сверху:
п {
    высота строки: $p-высота строки;
    + п {
        верхняя граница: $p-line-height;
    }
}

1

Применение поля только к нижней части может исказить другие аспекты дизайна.

Вместо этого я бы рекомендовал следующее.

 р {
  высота строки: 15 пикселей;
  поле: 15px 0;
}

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

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

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

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

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

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

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

Требуется, но никогда не отображается

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

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

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

html — CSS: уменьшение межстрочного интервала текста?

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

спросил

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

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

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

У меня есть небольшой фрагмент текста, а интервал отключен. Я попытался изменить стили, которые (кажутся) применимыми, а также заключить текст в ... и явно объявляя стиль. Кажется, ничего не работает.

Сайт представляет собой сайт WordPress, использующий «облегченную» тему Pagelines. URL-адрес — http://stage.dsthree.com, и проблема находится на главной странице (вы можете увидеть ее в четвертом столбце текста, чуть ниже поля «Подписаться по электронной почте» в мелком тексте — междустрочный интервал для этого текст отключен Этот сайт не позволяет мне размещать скриншоты, так как я здесь новенький

Я уменьшил высоту строки до 1% и до 1px безрезультатно

Будем очень признательны за любую помощь, указания или предложения по уменьшению пробелов!

  • html
  • wordpress
  • css
  • страницы

1

Встроенные элементы не учитывают такие свойства, как line-height ; они принимают высоту строки ближайшего родительского блока.

No related posts.