Правило близости

В следующих курсах по веб-дизайну мы будем всё больше фокусироваться на вопросах пользовательского опыта, дизайна и типографики. А сегодня в этом базовом курсе рассмотрим одно из главных и простых правил: правило близости. В английском его обычно называют principle of proximity или principle of grouping.

Правило близости: объекты, расположенные близко друг к другу, воспринимаются связанно.

Правило близости CSS

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

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

Что такое внутреннее расстояние элемента? Это всё, что разделяет составные части элемента. В примере выше это расстояние между окружностями одной группы. В случае абзаца текста внутреннее расстояние — это интерлиньяж — расстояние между строками. Для слов — расстояние между буквами.

Что такое внешнее расстояние? Это расстояние до другого элемента. В примере выше это расстояние между колонками (блоками) окружностей. Для абзаца — расстояние до другого абзаца или заголовка. Для слов — расстояние до следующего слова.

Правило близости в веб

Красным отмечено внутреннее расстояние, синим пунктиром — внешнее.

Для блока более верхнего уровня — «заголовок+абзац» — внутренним расстоянием является расстояние между заголовком и текстом, а внешним — расстояние между блоками (оно отмечено оранжевым пунктиром).

Вот типичный пример нарушения правил на веб-странице:

See the Pen Grouping: bad example by Hexlet (@hexlet) on CodePen.

Заголовки прилепились к чужим абзацам. Расстояния между элементами списка больше расстояния между заголовком и списком — внутренние расстояния оказались больше внешних. Строка с контактами слилась со строкой списка, как будто является её продолжением. Иконка электронной почты одинаково близка и к телефону, и к электронному адресу.

Отредактируйте CSS так, чтобы исправить эти проблемы.

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».