Свойство line height - межстрочный интервал css

Свойство "line-height css" - установка высоты строки css! Как регулировать межстрочный интервал или по другому - регулировка высоты строки через css.

Подробно о "line-height css"

1. Что такое "line-height css"?
2. Пример использования "line-height" внутри атрибута style
3. Пример использования "line-height" внутри тега style
4. Пример использования "line-height" внутри файла css

Что такое "line-height css"?

Начнем с определения - "Что такое line-height css"?

line-height css - это межстрочный интервал, который задает расстояние между строками. Для данного свойства есть отдельное слово - "интерлиньяж".

Если специально нигде не прописано свойство "line-height", то оно принимается по умолчанию:

line-height: normal;

Синтаксис "line-height".

line-height: множитель | значение | проценты | normal | inherit

Как переводится "line-height".

"line" - переводится с английского, как "линия".

"height" - переводится с английского, как "высота".

Общий перевод "line-height".

line-height - высота строки.

line-height можно использовать тремя способами :

line-height в атрибуте attribute style

line-height в теге style

line-height и файле file css

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

line-height в атрибуте attribute style

<div style="line-height: 2;">Использование line-height внутри атрибута style</div>

См. подробнее...


line-height в теге style

См. подробнее...


line-height и файле file css

См. подробнее...




Пример использования "line-height" внутри атрибута style

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

Возьмем блочный элемент div.

Во внутрь тега добавляем атрибут attribute style.

И чтобы мы могли увидеть края блока добавим свойство border

И естественно, что самое главное. что должно быть внутри данного атрибута - это line-height.

В качестве примера возьмем четыре значение line-height : 1, 2, 3, 4.

Соберем весь код вместе, в качестве примера кода используем первую строку с line-height = 1:

<div style="line-height:1;border: 1px solid;">Использование line-height внутри атрибута style + <strong>line-height:1;border: 1px solid;</strong> Здесь текст, который будет показывать игру высоты строки.</div>

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

Использование line-height внутри атрибута style + line-height:1;border: 1px solid; Здесь текст, который будет показывать игру высоты строки.
Использование line-height внутри атрибута style + line-height:2;border: 1px solid; Здесь текст, который будет показывать игру высоты строки.
Использование line-height внутри атрибута style + line-height:4;border: 1px solid; Здесь текст, который будет показывать игру высоты строки.
Использование line-height внутри атрибута style + line-height:3;border: 1px solid; Здесь текст, который будет показывать игру высоты строки.



Пример использования "line-height" внутри тега style

Изменим некоторые позиции для иллюстрации поведения line-height, это будет :

Используем тег абзаца "p".

Внутрь абзаца поместим class.

Этот класс будет прописан в теге {style}, который будет размещен на странице.

CSS:

<style> .vyisota_stroki_1{line-height:1;border: 1px solid;} </style>

Html:

<p class="vyisota_stroki_1">Использование line-height внутри тега style + тег p line-height:1 Здесь текст в теге абзаца, который будет показывать игру высоты строки.</p>

Высота строки через тег style

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

Использование line-height внутри тега style + тег "p" line-height:1 Здесь текст в теге абзаца, который будет показывать игру высоты строки.

Использование line-height внутри тега style + тег "p" line-height:2 Здесь текст в теге абзаца, который будет показывать игру высоты строки.

Использование line-height внутри тега style + тег "p" line-height:4 Здесь текст в теге абзаца, который будет показывать игру высоты строки.

Использование line-height внутри тега style + тег "p" line-height:3 Здесь текст в теге абзаца, который будет показывать игру высоты строки.




Пример использования "line-height" внутри файла css

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