Html line-height

Свойства «font-size» и «line-height»

Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.

font-size и line-height

  • font-size – размер шрифта, в частности, определяющий высоту букв.
  • line-height – высота строки.

Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:

Ёрш р
Ёрш Ё

Размер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.

Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p, g. Как видно из примера выше, при размере строки, равном font-size, строка не будет размером точно «под букву».

В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы Ё и р в примере выше пересекаются как раз поэтому.

Обратите внимание

В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.

Обычно размер строки делают чуть больше, чем шрифт.

По умолчанию в браузерах используется специальное значение line-height:normal.

Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне 1.1 — 1.25, но стандарт не гарантирует этого, он говорит лишь, что оно должно быть «разумным» (дословно – англ. reasonable).

Множитель для line-height

Значение line-height можно указать при помощи px или em, но гораздо лучше – задать его числом.

Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем line-height: 2 при font-size: 16px будет аналогично line-height: 32px (=16px*2).

Однако, между множителем и точным значением есть одна существенная разница.

  • Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.То есть, при line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
  • Значение, заданное в единицах измерения, запоминается и наследуется «как есть».Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.

Давайте посмотрим, как это выглядит, на примерах:

Множитель, line-height:1.25

стандартная строка шрифт в 2 раза больше
шрифт в 2 раза больше

Конкретное значение, line-height:1.25em

стандартная строка шрифт в 2 раза больше
шрифт в 2 раза больше

Какой вариант выглядит лучше? Наверно, первый. В нём размер строки более-менее соответствует шрифту, поскольку задан через множитель.

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

Синтаксис font: size/height family

Установить font-size и line-height можно одновременно.

Соответствующий синтаксис выглядит он так:

font: 20px/1.5 Arial,sans-serif;

При этом нужно обязательно указать сам шрифт, например Arial,sans-serif. Укороченный вариант font: 20px/1.5 работать не будет.

Дополнительно можно задать и свойства font-style, font-weight:

font: italic bold 20px/1.5 Arial,sans-serif;

Итого

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

font-sizeРазмер шрифта. Если сделать блок такой же высоты, как шрифт, то хвосты букв будут вылезать из-под него.font: 125%/1.

5 FontFamilyДаёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.

Источник: https://learn.javascript.ru/font-size-line-height

Свойство line-height

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

Это значит, что реальный промежуток между строками будет вычисляться так: line-heightfont-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние между строками текста.

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

Синтаксис

селектор { line-height: CSS единицы | проценты | множитель | normal | inherit;
}

Значения

ЗначениеОписание
CSS единицы Устанавливает размер шрифта в заданных единицах.
% Межстрочный интервал будет в процентах от размера шрифта.
Множитель Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста (от его font-size). Например, если font-size имеет значение 13px, а line-height — 1.5, то это все равно, что написать line-height: 20px (13px * 1.5 = 20px).
normal Браузер выбирает межстрочный интервал автоматически.
inherit Наследует значение родителя.

По умолчанию браузер выбирает межстрочный интервал автоматически (normal).

Примеры

Пример

В данном примере расстояние между строками текста будет line-heightfont-size = 35px — 13px = 21px:

p { font-size: 13px; line-height: 35px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Уменьшим промежуток до 21px13px = 7px:

p { font-size: 13px; line-height: 21px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

В данном примере расстояние между строками текста будет line-heightfont-size = 13px13px = 0px — строки практически слипнуться (хвостики букв верхней строки будут касаться хвостиков букв нижней):

p { font-size: 13px; line-height: 13px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

В данном примере значение line-height — множитель 1.5 от размера шрифта. Следовательно line-height будет эквивалентен font-size * 1.5 = 13px * 1.5 = 20px. А реальный промежуток между строками будет line-heightfont-size = 20px13px = 7px:

p { font-size: 13px; line-height: 1.5;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Увеличим множитель:

p { font-size: 13px; line-height: 2.5;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Если сделать line-height меньше font-size, то строки вообще налезут друг на друга:

p { font-size: 13px; line-height: 9px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Источник: http://code.mu/css/line-height.html

line-height

The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

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

The line-height property is specified as any one of the following:

  • a
  • a
  • a
  • the keyword normal.

Values

normalDepends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family. (unitless)The used value is this unitless multiplied by the element's own font size.

The computed value is the same as the specified . In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.The specified is used in the calculation of the line box height.

Values given in em units may produce unexpected results (see example below).Relative to the font size of the element itself. The computed value is this multiplied by the element's computed font size.

Percentage values may produce unexpected results (see the second example below).-moz-block-height Sets the line height to the content height of the current block.

Formal syntax

normal | | |

Examples

Basic example

/* All rules below have the same resultant line height */ div { line-height: 1.2; font-size: 10pt; } /* number/unitless */ 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 values instead of values. We will use two 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;
} h1 { font-size: 30px;
} .box { width: 18em; display: inline-block; vertical-align: top; font-size: 15px;
}

HTML

Avoid unexpected results by using unitless line-height

length and percentage line-heights have poor inheritance behavior …

Avoid unexpected results by using unitless line-height

length and percentage line-heights have poor inheritance behavior …

Читайте также:  Html white-space

Result

Accessibility concerns

Use a minimum value of 1.5 for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.

W3C Understanding WCAG 2.1

Specifications

Initial value

Applies to

Inherited

Percentages

Media

Computed value

Animation type

Canonical order

normal
all elements. It also applies to ::first-letter and ::first-line.
yes
refer to the font size of the element itself
visual
for percentage and length values, the absolute length, otherwise as specified
either number or length
the unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub

DesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetBasic support

-moz-block-heightNon-standard

Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 4 Opera Full support 7 Safari Full support 1 WebView Android Full support 1 Chrome Android Full support Yes Edge Mobile Full support 12 Firefox Android Full support 4 Opera Android Full support 6 Safari iOS Full support 1 Samsung Internet Android Full support Yes
Chrome No support No Edge No support No Firefox Full support 3.6 IE No support No Opera No support No Safari No support No WebView Android No support No Chrome Android No support No Edge Mobile No support No Firefox Android Full support 4 Opera Android No support No Safari iOS No support No Samsung Internet Android No support No

Full support  Full supportNo support  No supportNon-standard. Expect poor cross-browser support.Non-standard. Expect poor cross-browser support.

See also

Источник: https://developer.mozilla.org/docs/Web/CSS/line-height

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

line-height: normal | | | | inherit | initial | unset

normal

initial

inherit

unset

Расстояние между строчками вычисляется браузером самостоятельно
Число от 0.line-height: 1.5; = font-size * 1.5 = 20px * 1.5 = line-height: 30px; Текст легче читать, при значении от 1.5 до 2 [w3.org].
Любые единицы измерения: px, em, rem, sm.
% от em
То же, что normal
Наследуется значение родителей
Наследуется значение родителей

Изменить line-height:Когда в товарищах согласья нет, На лад их дело не пойдет, И выйдет из него не дело, только мука. Однажды Лебедь, Рак да Щука Везти с поклажей воз взялись И вместе трое все в него впряглись; Из кожи лезут вон, а возу все нет ходу! Поклажа бы для них казалась и легка: Да Лебедь рвется в облака, Рак пятится назад, а Щука тянет в воду. Кто виноват из них, кто прав — судить не нам; Да только воз и ныне там. height = количество_строк * line-height
height = 12 * 13px = 156px

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
padding

Это отличный инструмент, чтобы однострочный текст или картинку выравнивать вертикально по центру блока.

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

Изменить line-height родителя:
Зелёный потомок Синий потомок

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

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

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

значение line-height вСлучается нередко нам
И труд и мудрость видеть там,Где стоит только догадаться
За дело просто взяться.

текст
текст текст
текст
Для line-height родителя: 16px * 2 = 32px
Для line-height потомка: 30px * 2 = 60px Для px line-height родителя: 32px
Для px line-height потомка: 32px Для em line-height родителя: 16px * 2 = 32px
Для em line-height потомка: 16px * 2 = 32px Для % line-height родителя: 16px * 200 / 100 = 32px
Для % line-height потомка: 16px * 200 / 100 = 32px

line-height и HTML тег span

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

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

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

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

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

У блочного элемента нет высоты строки.

display: block;

Практическое использование: Как убрать отступ под картинкой.

line-height меняется вместе с шириной окна браузера

  1. Flexible typography with CSS locks [typekit.com]

Источник: http://shpargalkablog.ru/2014/04/line-height-css.html

Погружение в CSS: метрики шрифтов, line-height и vertical-align

line-height и vertical-align — это простые свойства CSS. Настолько простые, что большинство из нас уверены, что понимают, как они работают и как их использовать.

К сожалению, это не так — на самом деле они, пожалуй, являются самыми сложными свойствами, поскольку играют важную роль в создании малоизвестной особенности CSS под названием «строчный контекст форматирования» (inline formatting context).

Например, line-height можно задать в виде длины или безразмерного значения, но его значение по умолчанию — normal (стандартное). Хорошо, но что значит «стандартное»? Зачастую пишут, что это (как правило) 1, или, может быть, 1,2. Даже в спецификации CSS нет четкого ответа на данный вопрос.

Нам известно, что безразмерное значение line-height зависит от значения font-size, но проблема в том, что font-size: 100px выглядит по-разному для разных гарнитур. В связи с этим возникает вопрос: всегда ли line-height будет одинаковым или может различаться? Действительно ли это значение находится в промежутке от 1 до 1,2? А как vertical-align влияет на line-height?

Давайте углубимся в не самый простой механизм CSS…

Рассмотрим этот простой HTML-код с тегом p, содержащим три элемента span, каждый из которых со своим font-family:

Ba Ba Ba

p { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo }
.c { font-family: Catamaran }
При использовании одного и того же font-size в разных гарнитурах высота получается различной:

Даже если нам известно об этой особенности, почему font-size: 100px не создает элементы высотой 100px? Я измерил эти значения: Helvetica — 115px, Gruppo — 97px и Catamaran — 164px.

Хотя на первый взгляд это выглядит несколько странно, все вполне ожидаемо — причина в самом шрифте. Как это работает:

  • Шрифт задает свой em-квадрат (em-square) (он же UPM, units per em — единиц на кегельную площадку) — своего рода площадку, в рамках которой будет рисоваться каждый символ. В этом квадрате для измерения используются относительные единицы, и, как правило, для него принимаются размеры 1000 единиц. Хотя также бывает 1024, 2048 или иное количество единиц.
  • В зависимости от количества относительных единиц задаются метрики шрифтов, такие как высота верхних и нижних выносных элементов (ascender/descender), прописных и строчных букв. Некоторые значения могут выходить за рамки em-квадрата.
  • В браузере относительные единицы масштабируются до необходимого font-size.

Возьмем шрифт Catamaran и откроем его в FontForge для получения метрик:

  • em-квадрат принят за 1000 единиц;
  • высота верхних выносных элементов составляет 1100 единиц, а нижних — 540.

После нескольких проверок выяснилось, что браузеры на Mac OS используют значения HHead Ascent/Descent, а на Windows — Win Ascent/Descent (эти значения могут различаться). Помимо этого, высота прописных букв Capital Height составляет 680 единиц, а строчных X height — 485.

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

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

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

Важно

Каждая строка состоит из одного или нескольких строчных элементов (inline elements)(HTML-тегов или анонимных строчных элементов для текстового содержимого) и называется контейнером строки (line-box). Высота контейнера строки зависит от высот его дочерних элементов.

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

При изменении приведенного выше HTML-кода следующим образом:

Good design will be better. Ba Ba Ba We get to make a consequence.

будет сгенерировано три контейнера строки:

  • в первом и последнем будет по одному анонимному строчному элементу (текстовое содержимое);
  • во втором будет два анонимных строчных элемента и 3 элемента span.
Читайте также:  Html border

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

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

До этого момента я ввел два понятия — область содержимого и контейнер строки. Если вы внимательно читали, то заметили, что высота контейнера строки вычисляется на основании высоты его дочерних элементов, но не говорил, что на основании высоты области содержимого его дочерних элементов.

А это большая разница.

Даже если это может показаться странным, у строчного элемента есть две различных высоты: высота области содержимого и высота виртуальной области (virtual-area) (я сам придумал термин «виртуальная область», поскольку эту высоту мы увидеть не можем; в спецификации этого термина вы не найдете).

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

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

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

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

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

Есть и другие виды строчных элементов:

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

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

И все же проблема остается прежней: каково значение normal для line-height? Ответ на этот вопрос, как и в случае вычисления области содержимого, нужно искать среди метрик шрифта. Итак, вернемся к FontForge. Размер em-квадрата для Catamaran равняется 1000, но мы наблюдаем много значений для верхних и нижних выносных элементов:

  • Общие значения Ascent/Descent: высота верхнего выносного элемента — 770, нижнего — 230. Используются для создания символов (таблица «OS/2»).
  • Метрики Ascent/Descent: высота верхнего выносного элемента — 1100, нижнего — 540. Используются для определения высоты области содержимого (таблицы «hhea» и «OS/2»).
  • Метрика Line Gap (междустрочный интервал). Используется для определения line-height: normal, данное значение прибавляется к метрикам Ascent/Descent (таблица «hhea»).

В нашем случае шрифт Catamaran определяет, что междустрочный интервал равен 0 единиц, и, таким образом, line-height: normal будет равняться области содержимого, которая составляет 1640 единиц или 1,64.

В качестве сравнения: для шрифта Arial em-квадрат равен 2048 единиц, высота верхнего выносного элемента — 1854, нижнего — 434, междустрочный интервал — 67. Таким образом, при font-size: 100px область содержимого составит 112px (1117 единиц), а значение line-height: normal — 115px (1150 единиц или 1,15). Все эти метрики индивидуальны для каждого шрифта и задаются дизайнером шрифта.

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

Источник: https://habr.com/company/pt/blog/337450/

CSS межстрочный интервал: варианты решений :

Довольно часто у начинающих верстальщиков возникают проблемы при освоении каскадных таблиц стилей (CSS). Не исключением является работа с межстрочными интервалами в CSS. Межстрочный интервал — это расстояние между строчками по вертикали. Как и в обычном документе Microsoft Word, в тексте html-файла тоже можно изменять этот параметр.

Использование line-height при изменении интервала

Первым и самым правильным вариантом решения проблемы с интервалами будет задание значения свойству line-height. По умолчанию значение этого свойства равняется normal (line-height: normal;).

Межстрочный интервал вычисляется автоматически самим интернет-браузером и зависит, в частности, от вида шрифта, а также его размера.

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

В CSS межстрочный интервал может задаваться в разных единицах длины: пункты (pt), дюймы (in), пиксели (px) и проценты (%). Процент рассчитывается относительно текущего шрифта, и по умолчанию его значение равняется 100 %. Не стоит забывать, что свойство line-height заимствует значение свойства inherit у своего родительского элемента.

Приведем несколько примеров, как увеличить межстрочный интервал в CSS:

.

Процесс работы с межстрочными интервалами достаточно прост. У вас должны быть начальные знания CSS и умение подключать файл к главной странице html. Стили также можно задавать прямо на html-странице:<\p>

Чтобы в данном предложении сделать полуторный интервал, необходимо в файле CSS добавить такой код:

p.stroka {

line-height: 1.5;

}

Для того, чтобы сделать двойной интервал, можно прописать такой код:

p.stroka {

line-height: 2;

}

или

p.stroka {

line-height: 200%;

}

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

Теперь приведем пример, как уменьшить межстрочный интервал (CSS):

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

p.line {

line-height: 0.5;

}

или

p.line {

line-height: 50%;

}

или

p.line {

line-height: 2;

}

или

p.line {

line-height: 0.5pt;

}

Все 3 варианта корректны и соответствуют всем стандартам W3C, соответственно, будут работать в любой версии браузера.

Использование padding при изменении интервала

Однако помимо изменения свойства line-height, существует еще один способ изменить в CSS межстрочный интервал, это будет «игра» со значениями свойства padding. Стилевое свойство padding отвечает за внутренние отступы в любом html-объекте. По умолчанию данное свойство равняется 0. Подбирая различные значения, можно изменить межстрочный интервал, например:

.

Работать с межстрочными интервалами очень просто. Достаточно знать основы CSS и уметь подключать файл к основной странице html. Также его можно задать непосредственно на странице с расширением html.

Для увеличения межстрочного интервала увеличиваем значение свойства:

p.second {

padding: 10px;

}

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

p.second {

padding: 0px;

}

Отрицательное значение межстрочного интервала

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

Изменение межстрочного интервала в списках

Иногда возникает задача изменить межстрочные интервалы в списках

    и

      . Предыдущие методы не приведут к нужному результату, однако есть одно свойство, которое может изменить интервал в списке — это свойство — margin. Данное стилевое свойство может быть как с положительным, так и отрицательным значением. Покажем изменение межстрочного интервала в списке на примере:

      • Пункт 1
      • Пункт 2
      • Пункт 3

      Для увеличения отступов нужно в CSS-файле прописать следующие строки:

      ul li{

      margin-top: 10px;

      }

      Таким образом мы указали, что расстояние от каждого пункта списка увеличивается на 10 пикселей. Причем в данном случае возможно и отрицательное значение. Таким образом, мы можем задать: — margin-top: -15px.

    Источник: https://www.syl.ru/article/230259/new_css-mejstrochnyiy-interval-variantyi-resheniy

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

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

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

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

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

    Свойство line-height

    При помощи свойства 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 был для вас полезен. Если это так:

    1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
    2. [popup_trigger id=»3874″ tag=»span»]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

    На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

    Источник: http://site4business.net/css/line-height.html

    При перезагрузке страницы сбивается межстрочный интервал — ошибки css вёрстки — свойство line-height

    Нынче поправлял сайт одной знаменитой блогерше (имени не называю: боюсь преследования)) — так вот, поправлял, скажем так, вёрстку блога: ей кто-то из читателей подсказал, мол, текст при перезагрузках страниц то и дело принимает различный графический вид, попросту — меняется межсточный интервал при переходе от страницы к странице на мобильнике… (говорилось о браузере Опера-Мини).

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

    Чем такие поломки дизайна сайта сложны? а тем, что их нужно отслеживать на реальном девайсе — ни тестерах всяких, но реальном гаджете. Почему? а потому что всякие тестеры на компе естественно имеют мощность используемого компьютера/ браузера! Попросту говоря — многие из тонких дефектов не отследить…

    Обратите внимание

    Работа была выполнена. Заказчица довольна: и теперь не теряет многочисленных читателей, которые почитывают её посты по ночам с телефонов))

    И если кому-то тема интересна, давайте разбираться: акуна-матата…

    в качестве нерекламы: (хотя всегда нужно сказать пару лестных слов, коли разработчики их заслуживают))

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

    Главное его преимущество — лёгкость и скорость загрузки просматриваемых страниц, что немаловажно, имея у себя в арсенале качества нашего высокоскоростного интернета.

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

    прелести, фитюльки которых хороши только на стационарном компе.

    На мои советы использовать Оперу, большинство пользователей реагирует как на волка из леса, дескать, нужно переустанавливать «родной» браузер и причём ненароком попортить телефон… У меня все эти осторожности вызывают улыбку…

    Ну ладно — приступим к теме:

    к оглавлению $

    ошибки css вёрстки — свойство line-height

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

    Что получалось при моих тестах:

    При заходе на странички сайта вроде бы всё в порядке… однако, спустя пару перезагрузок — ошибка на лице окна браузера: действительно — расстояние между строк изменилось, стало в два раза шире по вертикали.

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

    Примечательно:

    если просматривать сайт, не включая экономичный режим браузера — всё нормально (разъяснится ниже по тексту) но как только переключаюсь в режим экономии МГб и скоростей — баг !

    Важно

    К стати сказать: структура текста сайта возможно сломается и в шапке сайта, и в подвале, и в сайдбаре  — всё в прямой зависимости от языка (и ошибок) документа CSS вашего сайта!

    Не забывайте обновлять документацию во время !

    И всё-таки почему такие ошибки и нечитаемость браузером происходят??

    Тут вряд ли стоит винить кого-то конкретно из разработчиков: всего интернета или же конкретного браузера, либо программистов в целом))

    Кратко:

    Опера-мини использует множества своих сторонних серверов, проходя через которые данные сайта обрабатываются и доставляются клиенту (нам с вами) — ввиду чего «браузер» добивается приличных скоростей загрузки… и как следствие приятной работы.

    Как нетрудно догадаться, в случаях всяких сокращений возможны какие-то незначительные потери, коли в вёрстке просматриваемого сайта присутствуют ошибки!

    Так же можно предположить «нечитаемость» всевозможными временными адаптациями языка CSS.

    И это справедливо: ведь существуют правила языков программирования!! Вот об этих правилах коротенько и потолкуем:

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

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

    Свойство line-height использует следующие единицы:

    1. px
    2. em
    3. %
    4. безразмерные числа, вроде 1.5

    Вот о безразмерных числа свойства и поговорим пристальнее)

    Эти безразмерные значения в основном действуют как проценты. Таким образом — 150% равно 1.5. …последнее является, как понимаете, более компактным и читаемым, а в нашем случае обусловило ошибку нечитаемого экономным вариантом браузером.

    То есть в шаблоне заказчицы (в файле стилей) свойство  было во всех случаях обозначено в px, что и привело к нечитаемости, а следовательно и ошибке.

    Мне пришлось полностью прогнать файл стилей и поправить несоответствия.

    Но — неприятность эту, мы пережили…

    Знаний для:

    к оглавлению $

    почему важны правила line-height

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

    Использование px — не рекомендуется, так как пиксели определяют статическое значение данных.

    Однако использование пикселей в некоторых смыслах действительно пригодится — например, если вы хотите выровнять текст по вертикали в соответствии с иным каким-то элементом блога/сайта, а не в зависимости от размера шрифта!

    Поскольку применение % или em может дать неожиданный результат, рекомендуемый метод связан с безразмерными числами:

    для основного текста line-height рекомендуется как 1.5 от размера текста;

    для заголовков line-height рекомендуется значение 1.2.

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

    Обработанная и вычисленная высота строки будет в нашем примере 16** 1.5 = 24px

    к оглавлению $

    наследование свойства line-height

    К сведению:

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

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

    К примеру элемент будет иметь высоту строки 27px — полезно знать, ибо значения blockquote некоторые админы применяют в комментариях… следует визуализировать разность от основного текста статей.

    На этом занавес представления опускается…
    …на рампы пыль печальная ложится…

    …и конечно же, читайте статьи сайта и подписывайтесь:

    Делюсь горьким опытом — кое-какими знаниями, для вашего сладкого благополучия))

    …вопросы в комментариях — помогу, в чём дюжу…
    mihalica.ru !

    Источник: https://mihalica.ru/svoystvo-line-height-mezhstrochnyiy-interval-oshibki-css-vyorstki/

    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 элемента.

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

      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;

    Источник: https://webformyself.com/css-ot-a-do-ya-kak-zadat-svojstvo-line-height/

Ссылка на основную публикацию