Расстояние

Обновлено: 25.08.2021 6906

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

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

Время прочтения:

Интервал над заголовком

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

Заголовок имеет одинаковый интервал внизу и вверху:

Заголовок имеет одинаковый интервал внизу и вверху

Заголовок имеет больший интервал вверху:

Заголовок имеет больший интервал вверху

Пример CSS:

h1,h2 {margin-top: 40px;}
p {margin-top: 20px;}

Меньший интервал для меньших заголовков

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

Небольшой заголовок слишком далек от текста:

Небольшой заголовок слишком далек от текста

https://imperavi.com/assets/img/book/typography/01-02-02.png

Небольшой заголовок близок к следующему тексту:

Небольшой заголовок близок к следующему тексту

Пример CSS:

h3,h4,h5 {margin-top: 36px;}
h4,h5 {margin-bottom: -12px;}
p {margin-top: 20px;}

Больший интервал для больших заголовков

Хорошо, когда внизу заголовков больше места. Это создает легкость чтения текста и хороший баланс. Если расстояние слишком мало, заголовок давит на текст своим контрастом.

Большой заголовок слишком близко к тексту:

Большой заголовок слишком близко к тексту

Большой заголовок и текст имеют хороший баланс интервалов:

Большой заголовок и текст имеют хороший баланс интервалов

Пример CSS:

h1 {margin-bottom: 20px;}
p {margin-top: 20px;}

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

Допустимый интервал между абзацами составляет 0,5..1 межстрочного интервала. Таким образом, если межстрочный интервал составляет 24 пикселя, то хороший интервал между абзацами будет 12..24 пикселя. Это помогает отделить абзацы друг от друга и облегчить чтение текста.

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

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

Допустимые интервалы между абзацами:

Допустимые интервалы между абзацами

Пример CSS:

h1 {line-height: 60%;}
p {line-height: 1.5;}

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

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

Неравный интервал до и после списка нарушает ритм:

Неравный интервал до и после списка нарушает ритм

Список вверху и внизу имеет тот же интервал, что и между абзацами:

Список вверху и внизу имеет тот же интервал, что и между абзацами

Пример CSS:

ol,ul {margin-top: 20px;margin-bottom: 20px;}

Расстояние между текстом и изображением или таблицей

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

Интервал после изображения такой же, как и между абзацами:

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

Увеличенный интервал после изображения:

Увеличенный интервал после изображения:

Пример CSS:

table {margin-top: 36px;}

Расстояние между текстом и цитатой или строкой

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

Кавычки и строки имеют тот же интервал, что и между абзацами:

Кавычки и строки имеют тот же интервал, что и между абзацами

Цитата и строка имеют увеличенный интервал вверху и внизу:

Цитата и строка имеют увеличенный интервал вверху и внизу

Пример CSS:

blockquote,hr { margin-top: 32px;margin-bottom: 32px;}

Вертикальный ритм, основанный на 8-кратной или базовой сетке, имеет мало значения

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

Базовая линия или сетка размером 8 пикселей автоматически не обеспечивает хорошего вертикального ритма:

Базовая линия или сетка размером 8 пикселей автоматически не обеспечивает хорошего вертикального ритма

Работа с расстоянием и контрастом создает уникальный и интересный вертикальный ритм:

Работа с расстоянием и контрастом создает уникальный и интересный вертикальный ритм

Напишите пожалуйста в комментариях:

А какие вы используете значения CSS (стилей) на своих сайтах?

Связаться в Telegram

Рейтинг: 5/5
1 голосов

Следующие страницы вас также могут заинтересовать:

Обновлено: 25.08.2021