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

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

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

Описание

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

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

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

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

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

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

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

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

Пример

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

div {
line-height: normal;
}

Изменение интервала между строками и абзацами

Интервалы между строками и абзацами задаются на вкладке Отступы и интервалы диалогового окна абзац (вкладкаГлавная ).

Вы также можете выровнять текст по _з0з_ , чтобы точно расположить текст по нескольким столбцам. Опорные направляющие задаются на вкладке опорные направляющие в диалоговом окне направляющие разметки (вкладкаМакет страницы ). Вы можете выровнять текст по опорным направляющим на вкладке Отступы и интервалы диалогового окна абзац (вкладкаГлавная ).

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

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

1. Выделите текст, который вы хотите изменить.

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

3. Откройте вкладку Отступы и интервалы.

4. В разделе междустрочный интервал выполните одно из указанных ниже действий.

   • В поле перед абзацами введите или выберите нужное расстояние над абзацем.

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

     Совет: Значение по умолчанию для интервалов до и после абзацев отображается в точках. Вы можете указать другие единицы измерения, введя аббревиатуру для них после числового значения: дюймы (in), сантиметры (cm), пики (PI), точки (Пт) или Пиксели (px). При указании единицы измерения, отличной от точки, Microsoft Office Publisher преобразует их в точки.

Автоматическая установка интервалов между строками текста

1. Выделите текст, который вы хотите изменить.

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

3. Откройте вкладку Отступы и интервалы.

4. В разделе междустрочный интервал в поле между строками введите или выберите величину интервала между строками текста. Например, для двойного пробела или выберите 2СП. чтобы изменить тип двойного пробела на одинарное или выберите 1СП.

   Совет: Значение интервала между строками по умолчанию отображается в виде пробелов (SP). При вводе целого числа Publisher интерпретирует его как количество пробелов. Вы можете указать другие единицы измерения, введя аббревиатуру для них после числового значения: дюймы (in), сантиметры (cm), пики (PI), точки (Пт) или Пиксели (px). При указании единицы измерения, отличной от пробелов, Publisher преобразует их в точки.

Интервалы между строками и абзацами задаются на вкладке Отступы и интервалы диалогового окна абзац (менюФормат ).

Вы также можете выровнять текст по _з0з_ , чтобы точно расположить текст по нескольким столбцам. Опорные направляющие задаются на вкладке опорные направляющие в диалоговом окне направляющие разметки (менюРасположение ). Вы можете выровнять текст по опорным направляющим на вкладке Отступы и интервалы диалогового окна абзац (менюФормат ).

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

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

1. Выделите текст, который вы хотите изменить.

2. В меню Формат выберите пункт Абзац и откройте вкладку Отступы и интервалы.

3. В разделе междустрочный интервал выполните одно из указанных ниже действий.

   • В поле перед абзацами введите или выберите нужное расстояние над абзацем.

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

     Совет: Значение по умолчанию для интервалов до и после абзацев отображается в точках. Вы можете указать другие единицы измерения, введя аббревиатуру для них после числового значения: дюймы (in), сантиметры (cm), пики (PI), точки (Пт) или Пиксели (px). При указании единицы измерения, отличной от точки, Microsoft Office Publisher преобразует их в точки.

Автоматическая установка интервалов между строками текста

1. Выделите текст, который вы хотите изменить.

2. В меню Формат выберите пункт Абзац и откройте вкладку Отступы и интервалы.

3. В разделе междустрочный интервал в поле между строками введите или выберите величину интервала между строками текста. Например, для двойного пробела или выберите 2СП. чтобы изменить тип двойного пробела на одинарное или выберите 1СП.

   Совет: Значение интервала между строками по умолчанию отображается в виде пробелов (SP). При вводе целого числа Publisher интерпретирует его как количество пробелов. Вы можете указать другие единицы измерения, введя аббревиатуру для них после числового значения: дюймы (in), сантиметры (cm), пики (PI), точки (Пт) или Пиксели (px). При указании единицы измерения, отличной от пробелов, Publisher преобразует их в точки.

Свойство line-height — межстрочный интервал (высота линии текста)

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

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

Значения

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

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

Пример

В данном примере расстояние между строками текста будет line-height — font-size =
35px — 13px = 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.

Пример

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

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

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 =
13px — 13px = 0px — строки практически слипнуться (хвостики букв верхней строки будут касаться
хвостиков букв нижней):

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

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-height — font-size =
20px — 13px = 7px:

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

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.

Пример

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

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

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, то строки вообще налезут друг на друга:

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

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.

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

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

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

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

Как задать расстояние между строк CSS с помощью line-height?

Итак, наиболее удобным свойством для задания расстояние между строк в CSS является свойство line-height, которое задает межстрочный интервал (как Microsoft Word) относительно размера шрифта.

Значение свойства line-height можно задавать при помощи:

• множителя
• в пикселях (px)
• пунктах (pt)
• относительных единицах (em)
• процентах(%)
• дюймах (in) и др

Кроме этого, значение line-height может наследоваться от родительского блока (inherit) и вычисляться автоматически (normal).

На мой взгляд, наиболее удобной единицей является множитель.

Вот наглядный пример использования изменения расстояние между строк CSS с помощью line-height:

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

Допишем для этого заголовка свойство line-height равное 1:

PHP

#row-ico h3{
line-height:1;
}

1 2 3

#row-ico h3{ line-height1; }

Вот что в результате получается:

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

Как выровнять текст в HTML

Можно выровнять абзац, используя атрибут align со следующими значениями:

text-align: left|right|center|justify|initial|inherit;

Скопируйте следующий код в файл .html.

<!Doctype html><html><head><title>Выравнивание абзаца с помощью атрибута Style </title></head>
<body>
<p style=”text-align:center”>Этот абзац выровнен по центру</p>
<p style=”text-align:right”>Этот абзац выровнен по правому краю</p>
<p style=”text-align:justify”>Этот абзац выводится в окне браузера, выровненным по ширине. Распределенный по ширине абзац выравнивается по правому и по левому краю за счет добавления дополнительных пробелов. Вы можете видеть, что края выровненного по ширине абзаца соответствуют краям абзацев, выровненных по левому и по правому краю. В выровненном по левому краю абзаце левый край является ровным, а в абзаце, выровненном по правому краю - правый. Вы видите, что у этого абзаца оба края являются ровными? Это достигается благодаря стилю text-align:justify.</p>
<body></html>

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

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

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

line-height: normal | <number> | <length> | <проценты> | inherit | initial | unset

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

Когда в товарищах согласья нет,На лад их дело не пойдет,И выйдет из него не дело, только мука.Однажды Лебедь, Рак да ЩукаВезти с поклажей воз взялисьИ вместе трое все в него впряглись;Из кожи лезут вон, а возу все нет ходу!Поклажа бы для них казалась и легка:Да Лебедь рвется в облака,Рак пятится назад, а Щука тянет в воду.Кто виноват из них, кто прав — судить не нам;Да только воз и ныне там.

<style>
#nol {
  font-size: 11px;
  line-height: 13px;
  padding: 10px; 
  border: 5px solid #456; 
}
</style>

<div></div>

height = количество_строк * line-height
height = 12 * 13px = 156px

Чем отличается от или

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

(по умолчанию) — это

1. если присутствует текст, то сумма всех строк
2. если есть дочерние элементы, то сумма их , , и

Когда в товарищах согласья нет,На лад их дело не пойдет,И выйдет из него не дело, только мука.Однажды Лебедь, Рак да ЩукаВезти с поклажей воз взялисьИ вместе трое все в него впряглись;Из кожи лезут вон, а возу все нет ходу!Поклажа бы для них казалась и легка:Да Лебедь рвется в облака,Рак пятится назад, а Щука тянет в воду.Кто виноват из них, кто прав — судить не нам;Да только воз и ныне там.

<style>
#nol1 {
  font-size: 11px;
  height: 156px;
  line-height: 13px;
  padding: 10px; 
  border: 5px solid #456; 
}
</style>

<div></div>

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

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

Пример

Пример

<div>line-height</div>
<div>padding</div>

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

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

Зелёный потомок

Синий потомок

<div>
  <div>Зелёный потомок</div>
  <div>Синий потомок</div>
</div>

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

Зелёный потомок

Синий потомок

<div>
  <div>Зелёный потомок</div>
  <div>Синий потомок</div>
</div>

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

Случается нередко намИ труд и мудрость видеть там,

<div>
  <div>текст<br>текст</div>
  текст<br>текст
</div>

Для <number> line-height родителя: 16px * 2 = 32px
Для <number> 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

и HTML тег

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

span

<div>
  <span>span</span>
</div>

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

span

<div>
  <span>span</span>
</div>

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

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

<div>
  <img alt="16*16" src="http://2.bp.blogspot.com//-KpOxK0BzM-w/U0ZIUo4PF7I/AAAAAAAAEUI/PO4MiuWxy1o/s320/16.png" />
</div>

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

1. Flexible typography with CSS locks

Внешний отступ с помощью CSS-свойства «margin»

Отличительная особенность свойства «margin» – это то, что отступ добавляется вне элемента, то есть внешний.

Вариантов добавления здесь также два.

Первый – с явным указанием стороны:

Второй – с перечислением значений, каждое из которых соответствует своей стороне:

Здесь описывать все нюансы работы с правилами я не буду, все так же, как и о свойстве «padding», о нем написано выше.

Используем margin со следующим значением:

Визуально это будет выглядеть так:

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

Важная особенность: если вы внимательно смотрели на результат, то могли заметить, что соседние отступы у элементов не суммируются. То есть если первый элемент имеет внешний нижний отступ, равный 10px, а второй – внешний верхний отступ с этим же значением, то общее расстояние между ними будет равно также 10px. Если 10 и 15 соответственно, то общее – 15 и так далее.

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

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

Задаем интервалы: между строк, между словами, между буквами и меняем регистр букв средствами CSS

Категория: Уроки CSS Просмотров: 2117 Коментариев: Дата: 2018-08-12 Добавил: admin

И так, продолжаем изучать инструменты CSS для оформления текста, и в этом уроке мы рассмотрим еще четыре свойства для текста, которые нужно знать, и которые часто применяются на практике.

• line-height: 35px ; — Устанавливает межстрочный интервал
• word-spacing: 15px ; — Интервал между словами
• letter-spacing: 4px ; — Интервал между буквами
• text-transform: uppercase/ lowercase/ capitalize ; — Изменение регистра букв

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

Первое свойство, которое мы рассмотрим — это свойство задающие межстрочный интервал. Для этого используется свойство line-height: ;.

Благодаря этому свойству мы можем менять расстояние между двумя базовыми линиям шрифта показанными на рисунке. Базовая линия это линия, на которой стоят буквы. Соответственно, когда располагаются две строки, у каждой строки есть своя базовая линия и расстояние между ними задается как раз, именно, с помощью свойства line-height: ;. Данное расстояние браузер задает самостоятельно в зависимости от размера шрифта.

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

И, ниже зададим то самое наше свойство, которое и будет менять расстояние между строками.

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

Также можно увеличивать или уменьшать расстояние между строками с помощью множителя. Если мы используем в качестве значения просто число без обозначений > line-height: 2 ;, то браузер будет воспринимать его как множитель от текущего размера шрифта. То есть, если указана цифра два, то это будет обозначать, что браузеру нужно взять текущий размер шрифта и умножить его на два, что в итоге даст 28px. Это и будет расстояние между базовыми линиями шрифта.

Использование множителя удобно тем, что при изменении шрифта расстояние между строк так же измениться пропорционально. Таким образом, расстояние между строк можно регулировать множителем либо любым другим фиксированным значением px, %, em, pt.

Интервал между словами

Следующее свойство, которое мы рассмотрим это свойство word-spacing: ;, позволяющее изменять расстояние между словами. В этом свойстве используются фиксированные значения, и, уже проценты здесь не подходят.

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

Теперь если обновить страницу то между словами увеличится расстояние на 15px.

Имейте ввиду, что если задать свойство text-align: justify; — выравнивание текста по ширине, то свойство word-spacing: ; браузером будет игнорироваться.

Интервал между буквами

Свойство letter-spacing: ; не так актуально и при больших объемах текста редко используется, так как браузер автоматически выбирает оптимальное расстояние между буквами. В основном, применяется это свойство при использовании больших шрифтов в одном двух словах.

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

И задаем само свойство.

Изменение регистра букв

И, четвертое свойство — это text-transform: ;. Данное свойство изменяет регистр букв.

Бывают такие моменты, когда нужно написать какое-то слово полностью из заглавных букв. Для таких случаев и используется свойство text-transform: ;. Чаще всего используется данное свойство для заголовков.

Написать слово большими буквами можно и напрямую в HTML, но как уже знаем HTML — это только разметка, а оформление создается через таблицу стилей CSS. Поэтому, для этого и используется именно CSS.

Для формирования заглавных букв свойству text-transform: ; задается значение uppercase, что означает upper – верхний и case – регистр.

Задав такое свойство все заголовки H1 будут отображены в верхнем регистре.

Точно так же, можно и написать слово из маленьких букв, для этого используется значение lowercase, где lower – обозначает нижний и case – регистр.

И, если теперь обновить страницу, то все буквы будут отображены в нижнем регистре.

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

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

На этом все, мы рассмотрели все основные свойства, позволяющие нам изменять внешний вид текста.

Установка междустрочного интервала

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

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

Обращаю Ваше внимание на то, что при установке значения высоты строки с использованием единиц измерения пиксели, размер междустрочного интервала, напрямую будет зависеть от размера шрифта, то есть он будет автоматически корректироваться пропорционально изменению свойства font-size (размер шрифта), рассмотренного в предыдущей статье. Как правило, во всех современных браузерах высота строки по умолчанию составляет 120 %

Как правило, во всех современных браузерах высота строки по умолчанию составляет 120 %.

Расчёт междустрочного интервала происходит следующим образом:

высота строки (line-height) минус высота шрифта (font-size)

Например, размер шрифта составляет 20 пикселей, а высота строки 150% (30 пикселей). Таким образом, получается:

высота строки (150% или 30px) минус высота шрифта (20px) = 10px

Допускается задавать размер высоты строки с использованием числового значения. Объявление выглядит следующим образом:

cелектор {
line-height : 1.5;
}

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

Числовое значение * размер шрифта

Например, шрифт для абзаца установлен 2em, а высота строки задана как 1.5:

p {
font-size : 2em;
line-height : 1.5;
}

Расчетное значение междустрочного интервала в нашем случае составит 3em:

Числовое значение(1.5) * размер шрифта(2em) = 3em

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример использование свойства line-height</title>
<style> 
.test {
line-height: 10px; /* задаём высоту строки в пикселях. */
}
.test2 {
line-height: normal; /* задаём высоту строки (значение по умолчанию). */
}
.test3 {
line-height: 150%; /* задаём высоту строки в процентах от текущего размера шрифта. */
}
.test4 {
line-height: 2; /* задаём высоту строки числом, которое будет умножаться с текущим размером шрифта. */
}
</style>
</head>
	<body>
		<p class = "test">Параграф в котором line-height: 10px<br>Параграф в котором line-height: 10px</p>
		<p class = "test2">Параграф в котором line-height: normal<br>Параграф в котором line-height: normal</p>
		<p class = "test3">Параграф в котором line-height: 150%<br>Параграф в котором line-height: 150%</p>
		<p class = "test4">Параграф в котором line-height: 2<br>Параграф в котором line-height: 2</p>
	</body>
</html>

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

Результат нашего примера:

Рис. 62 Пример использование свойства line-height (установка междустрочного интервала).

Горизонтальное и вертикальное выравнивание

В большинстве случаев при работе с таблицами вам придется настраивать выравнивание содержимого внутри заголовочных ячеек и ячеек данных. Свойство text-align применяется для горизонтального выравнивания по аналогии с любой текстовой информацией. Применение этого свойства для текста мы рассматривали ранее в статье «Форматирование текста в CSS».

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример горизонтального выравнивания в таблице</title>
<style> 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
}
.left {
text-align: left; /* выравнивает текст ячейки влево */
}
.right {
text-align: right; /* выравнивает текст ячейки вправо */
}
.center {
text-align: center; /* выравнивает текст ячейки по центру */
}
.justify {
text-align: justify; /* выравнивает текст ячейки по ширине */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>Значение</th><th>Описание</th>
			</tr>
			<tr class = "left">
				<td>left</td><td>Выравнивает текст ячейки влево. Это значение по умолчанию (если направление текста слева направо).</td>
			</tr>
			<tr class = "right">
				<td>right</td><td>Выравнивает текст ячейки вправо. Это значение по умолчанию (если направление текста справа налево).</td>
			</tr>
			<tr class = "center">
				<td>center</td><td>Выравнивает текст ячейки по центру.</td>
			</tr>
			<tr class = "justify">
				<td>justify</td><td>Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст ячейки по ширине).</td>
			</tr>
		</table>
	</body>
</html>

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

Результат нашего примера:

Рис. 149 Пример горизонтального выравнивания в таблице.

Кроме горизонтального выравнивания вы также можете определить и вертикальное выравнивание в ячейках таблицы с помощью свойства vertical-align.

Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения* этого свойства:

Значение	Описание
baseline	Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.
top	Выравнивает содержимое ячейки вертикально по верхнему краю.
middle	Выравнивает содержимое ячейки вертикально по середине.
bottom	Выравнивает содержимое ячейки вертикально по нижнему краю.

* — Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<title>Пример вертикального выравнивания в таблице</title>
<style> 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
height: 55px; /* задаем высоту ячеек */
}
.baseline {
vertical-align: baseline; /* выравнивает базовую линию ячейки по базовой линии родителя */
}
.top {
vertical-align: top; /* выравнивает содержимое ячейки вертикально по верхнему краю */
}
.middle {
vertical-align: middle; /* выравнивает содержимое ячейки вертикально по середине */
}
.bottom {
vertical-align: bottom; /* выравнивает содержимое ячейки вертикально по нижнему краю */
}
</style>
</head>
	<body>
		<table> 
			<tr>
				<th>Значение</th><th>Описание</th>
			</tr>
			<tr class = "baseline"> 
				<td>baseline</td><td>Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.</td>
			</tr>
			<tr class = "top"> 
				<td>top</td><td>Выравнивает содержимое ячейки вертикально по верхнему краю.</td>
			</tr>
			<tr class = "middle"> 
				<td>middle</td><td>Выравнивает содержимое ячейки вертикально по середине.</td>
			</tr>
			<tr class = "bottom"> 
				<td>bottom</td><td>Выравнивает содержимое ячейки вертикально по нижнему краю.</td>
			</tr>
		</table> 
	</body>
</html>

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

Рис. 150 Пример вертикального выравнивания в таблице.

Список всевозможных параметров

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

• одинарный (отступ от строчки к строчке зависит исключительно от используемого в работе размера шрифта);
• 1,5 строки (увеличенный в 1,5 раза одинарный междустрочный отступ);
• двойной (увеличенный в 2 раза одинарный отступ);
• минимум (между строками появляется небольшой промежуток, которого должно хватить лишь на размещение крупного знака или графического символа, который может быть напечатан соответствующим шрифтом);
• точно (фиксированный отступ от строчки к строчке, который выражается в пунктах). При использовании в тексте шрифта 12 пунктов следует указать 14 пунктов;
• множитель (позволяет убрать неподходящее расстояние между абзацами в Word, задавая отступ, который численно превышает 1). Параметр 1,15, например, увеличит промежуток на 15 процентов.

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