Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Правило близости Основы HTML, CSS и веб-дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

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

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»