Как настроить интерлиньяж в HTML

Владельцы малого бизнеса с печатным фоном будут знакомы с термином интерлиньяж, который относится к интервалу между строками текста. При создании HTML-страницы эквивалентом интерлиньяжа является свойство CSS «line-height», используемое для установки расстояния между каждой строкой. Высота строки может быть установлена ​​на фиксированную высоту, например 12 пикселей, или в процентах от размера шрифта, например 120 процентов. Установка значения «нормальный» сбрасывает межстрочный интервал обратно к значению по умолчанию.

1

Откройте приложение для веб-дизайна или текстовый редактор и создайте новую HTML-страницу или откройте существующую.

2

Добавьте следующий код в тело веб-страницы:

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Mauris condimentum pulvinar pulvinar. Suspendisse eros nulla, sodales ut tincidunt sit amet, facilisis id dui. Donec pharetra euismod mattis. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

3

Добавьте следующую таблицу стилей CSS в раздел страницы:

Это правило CSS применяется к div с идентификатором exampleText, устанавливая ширину 400 пикселей и размер шрифта 14 пикселей, отображая абзац текста на нескольких строках. Сохраните страницу, а затем откройте в веб-браузере, чтобы просмотреть результат.

4

Добавьте следующее новое правило CSS в таблицу стилей на странице:

высота строки: 200%; 

}

Это правило изменит межстрочный интервал абзаца до 200% от размера шрифта, в данном случае 28 пикселей. Если размер шрифта изменится, межстрочный интервал автоматически изменится пропорционально. Сохраните страницу и перезагрузите ее в своем веб-браузере, чтобы увидеть эффект свойства межстрочного интервала.

5

Измените настройку высоты строки на 20 пикселей следующим образом:

высота строки: 20 пикселей; 

}

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


$config[zx-auto] not found$config[zx-overlay] not found