Html межстрочный интервал css

Содержание:

Погружение в CSS: метрики шрифтов, line-height и vertical-align
Начнем с разговора о font-size
Отступы в CSS — cинтаксис CSS-свойств padding и margin
Отступы
line-height
Задаем интервалы: между строк, между словами, между буквами и меняем регистр букв средствами CSS
Начнем с разговора о font-size
Краткий гид по типографическим терминам
Пример использования полей и отступов с элементом form
Расстояние между строками в Word
- Как выбрать расстояние между строками
- Как изменить междустрочный интервал
line-height, letter-spacing, word-spacing — учебник CSS
Список всевозможных параметров
Настройка отступов в Ворде
- Вариант 2: Абзацы
- Вариант 3: Строки
Поднимем руки над клавиатурой и да раздвинем строки!
Как выровнять текст в HTML
Использование padding при изменении интервала
Горизонтальное и вертикальное выравнивание

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

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

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

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

Начнем с разговора о font-size

При использовании одного и того же font-size в разных гарнитурах высота получается различной:

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

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

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

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

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

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

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

Отступы в CSS — cинтаксис CSS-свойств padding и margin

Синтаксис, который используется для единичного объявления свойства CSS margin:

margin: 50px;

Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

margin: 10px 20px 50px 100px;

Где:

10px — отступ сверху CSS;
20px — отступ справа CSS;
30px — отступ снизу CSS;
40px — отступ слева CSS.

Также можно установить отступ слева CSS и другие направления отдельно:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Отступы

Я использовал термин »отступы«, чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding, чтобы задать для абзаца отступ слева или справа.

Ниже приводится пример абзацев с отступом слева и справа:

<!Doctype html>
<html><head><title>Отступы абзацев с помощью атрибута Style</title></head>
<body>
<p style=”text-align:justify”> Этот абзац не имеет отступа, он просто выровнен по ширине. Посмотрите на атрибут style элемента P для этого абзаца.</p>
<p style=”padding-left:30px; text-align:justify”>Для этого абзаца я задал отступ слева в 30 пикселей с помощью стиля padding-left:30px. Также этот абзац выровнен по ширине с помощью стиля text-align:justify. Как вы уже знаете, мы можем использовать несколько значений для атрибута Style, разделяя их точкой с запятой.</p>
<p style=”padding-right:30px; text-align:justify”>А этот абзац имеет отступ справа в 30 пикселей, но не имеет отступа слева. Он также выровнен по ширине. Значение ‘padding-right’ атрибута style задает отступ справа. Если вы не видите эффекта, уменьшите ширину окна браузера, чтобы абзац HTML, выровненный по ширине, отображался надлежащим образом.</p>
</body></html>

line-height

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

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

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

Задаем интервалы: между строк, между словами, между буквами и меняем регистр букв средствами 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, указав его в качестве параметра данного свойства, все первые буквы в каждом слове будут заглавными.

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

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

Начнем с разговора о font-size

При использовании одного и того же font-size в разных гарнитурах высота получается различной:

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

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

Краткий гид по типографическим терминам

В традиционном дизайне шрифта строка состоит из нескольких элементов:

Базовая линия (Baseline): Это воображаемая линия, на которой располагается текст. Когда вы пишете в тетради в линейку, строка на которой вы пишете – и есть базовая линия.
Нижний выносной элемент (Descender): Это линия, которая находится чуть ниже базовой. В ней оказываются части букв, – например, строчных р, у, ф – которые выходят за пределы базовой линии.
X-высота (X-height): Это (кто бы мог подумать) высота обычной маленькой буквы x в строке текста. Как правило, эту высоту имеют и другие строчные буквы, хотя некоторые из них выходят за пределы x-высоты. В любом случае, x-высота является общепринятой высотой строчных букв.
Высота прописных (Cap-height): Это высота большинства заглавных букв на линии текста.
Верхний выносной элемент (Ascender): Это линия, которая обычно находится чуть выше линии роста прописных. Там оказываются части букв, которые выходят за пределы высоты прописных.

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

Интерлиньяж обозначает установленное в настройках шрифта расстояние между двумя базовыми линиями.

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

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

* {
  margin: 0;
  padding: 0;
  }

Так убирается внешний и внутренний отступ для всех элементов.

Также мы используем шрифт Lato из Google Fonts для свойства font-family.

Нам нужно добавить содержимое, поэтому давайте создадим тэг <h1> с текстом и дадим line-height какое-нибудь безумно большое значение, например, – 300px. В результате получаем одну строку текста с невероятно большим отступом сверху и снизу.

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

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

Но, что ещё более удивительно, если придать свойствам line-height (высота строки) и font-size (размер шрифта) одинаковую величину, то всё равно останется лишнее пространство над и под текстом. Мы можем это увидеть, изменив цвет фона элементов.

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

Пример использования полей и отступов с элементом form

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

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

Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding:

btn

Поля для текстовых полей:

padding: 10px;

Поля для кнопки:

padding: 9px 15px;

Посмотреть демо-версию и код

Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin. В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.

margin: -3px;

Поля формы будут выглядеть следующим образом:

Посмотреть демо-версию и код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

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

Для кнопки “Save” мы также применили свойство padding:

padding: 9px 15px;

которое используется для выравнивания текста во всех направлениях.

Данная публикация является переводом статьи «CSS padding and margin – Explained with 4 HTML elements» , подготовленная редакцией проекта.

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

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

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

Вот пример текста с небольшим расстоянием между строками:

Такой текст не очень-то удобно читать. А вот пример того же текста, но уже с увеличенным интервалом:

Такой текст и удобнее, и приятнее читать. Но он занимает больше места на странице. В программе Microsoft Word можно как увеличить, так и наоборот уменьшить расстояние между строками.

Как выбрать расстояние между строками

Чтобы назначить междустрочный интервал для текста, который только будет напечатан, нужно нажать правой кнопкой мышки по листу (по белой части). Появится список, в котором нужно нажать на пункт «Абзац» левой кнопкой мышки.

Откроется новое окошко. В нем нас интересует только нижняя правая часть под названием «Междустрочный». Сразу после этой надписи есть поле, в котором показано, какое расстояние установлено на данный момент. В примере на картинке выбран «Одинарный» интервал.

Если Вы нажмете на маленькую кнопку в конце этого поля, откроется список с различными вариантами: «Одинарный», «Полуторный», «Двойной», «Точно» и так далее.

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

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

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

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

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

Теперь осталось изменить интервал. Нажмите правой кнопкой по выделенному (закрашенному) тексту. Появится список, из которого нужно выбрать пункт «Абзац».

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

Кстати, обратите внимание на пункт «Интервал» и значение «После» в правом нижнем углу окошка. Зачастую значение в этом поле 10

Если Вы хотите, чтобы интервал соответствовал тому, который Вы выбрали, напечатайте значение 0.

line-height, letter-spacing, word-spacing — учебник CSS

Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то , , или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.

Межсимвольный интервал CSS: letter-spacing

Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения (чтобы наследовать значение у родителя) и (если необходимо вернуть нормальное расстояние между символами).

Пример записи межсимвольного интервала:

p {
	letter-spacing: 2em;
}

Интервал между словами: word-spacing

Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения и . Можно задавать отрицательные значения. Ниже показан пример записи стиля:

p {
	word-spacing: 6px;
}

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

С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения и .

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

p {
	line-height: 180%;
}

На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:

Итоги

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

Далее в учебнике: выравнивание текста в CSS – свойство text-align.

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

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

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

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

Настройка отступов в Ворде

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

Вариант 2: Абзацы

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

Выделите текст, для которого необходимо настроить отступы (используйте мышку для обозначения фрагмента или нажмите Ctrl+A, если требуется задать одинаковые параметры для всего содержимого документа).

«Главная»«Абзац»

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

Определившись с настройками, нажмите «ОК» для того, чтобы внесенные изменения вступили в силу. Если перед этим нажать на кнопку «По умолчанию», можно будет указать, на что распространятся установленные вами параметры — только на текущий документ или на все, которые будут созданы на основе этого шаблона.

Совет: В диалоговом окне «Абзац», в поле предпросмотра «Образец» вы можете сразу видеть то, как будет меняться текст при изменение тех или иных параметров.

Расположение текста на в документе Word изменится согласно заданным вами параметрам отступов.

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

Справа — смещение правого края абзаца на заданное пользователем расстояние;
Слева — смещение левого края абзаца на расстояние, указанное пользователем;
Особые — позволяет задавать определенный размер отступа для первой строки абзаца (пункт «Отступ» в разделе «Первая строка»). Здесь же можно указать и параметры выступа (пункт «Выступ»). Аналогичные действия могут быть выполнены и с помощью линейки, об использовании которой мы писали ранее.

Совет: Если вы хотите сохранить внесенные вами изменения в качестве значений по умолчанию, просто нажмите на одноименную кнопку, расположенную в нижней части окна «Абзац».

Вариант 3: Строки

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

Поднимем руки над клавиатурой и да раздвинем строки!

На всякий случай начну главу с пояснения «что такое межстрочный интервал».

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

line-height предусматривает два встроенных ключевых слова:

normal – вычисление расстояния между строками абзацев происходит автоматически;
inherit – наследуется форматирование объекта-родителя.

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

Думаю, особо любопытные задались вопросом: «Как же работает такой механизм?». Ответ очень прост: при помощи умножения. Интерлиньяж устанавливается, начиная от базовой линии. Если значение свойства указывается цифрой, то она распознается как множитель, на который и идет умножение базового значения.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример 1</title>
   <style>
   h1 {
    line-height: 95%;
    border-bottom: 3px double #000;
     border-top: 1px solid #000;
     padding: 15px;
   } 
   ol {
    line-height: 2.5;
   }
  body {
background: 	#EEE8AA;
 }
  </style>
 </head> 
 <body> 
  <h1>Позитивные аспекты глобализации</h1>
  <p>
<ol>
<li>Усиление и стимулирование свободной конкуренции для активного развития технологий;</li>
<li>Мировое разделение труда, которое способствует равномерному распределению важных ресурсов;</li>
<li>Повышение уровня жизни человечества.</li>
</ol>
</p> 
 </body>
</html>

Как выровнять текст в 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 код абзаца выглядит следующим образом.

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

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

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

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

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

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

В большинстве случаев при работе с таблицами вам придется настраивать выравнивание содержимого внутри заголовочных ячеек и ячеек данных. Свойство 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 Пример вертикального выравнивания в таблице.