0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В следующих курсах по веб-дизайну мы будем всё больше фокусироваться на вопросах пользовательского опыта, дизайна и типографики. А сегодня в этом базовом курсе рассмотрим одно из главных и простых правил:<strong>правило близости</strong>. В английском его обычно называют principle of proximity или principle of grouping.</p>
1
<p>В следующих курсах по веб-дизайну мы будем всё больше фокусироваться на вопросах пользовательского опыта, дизайна и типографики. А сегодня в этом базовом курсе рассмотрим одно из главных и простых правил:<strong>правило близости</strong>. В английском его обычно называют principle of proximity или principle of grouping.</p>
2
<p><strong>Правило близости: объекты, расположенные близко друг к другу, воспринимаются связанно.</strong></p>
2
<p><strong>Правило близости: объекты, расположенные близко друг к другу, воспринимаются связанно.</strong></p>
3
<p><em>Объекты справа воспринимаются как три отдельные колонки из-за группировки.</em></p>
3
<p><em>Объекты справа воспринимаются как три отдельные колонки из-за группировки.</em></p>
4
<p>Из этого правила можно вывести более практическую форму:<strong>внутренние расстояния элемента должны быть меньше внешних</strong>.</p>
4
<p>Из этого правила можно вывести более практическую форму:<strong>внутренние расстояния элемента должны быть меньше внешних</strong>.</p>
5
<p>Что такое внутреннее расстояние элемента? Это всё, что разделяет составные части элемента. В примере выше это расстояние между окружностями одной группы. В случае абзаца текста внутреннее расстояние - это интерлиньяж - расстояние между строками. Для слов - расстояние между буквами.</p>
5
<p>Что такое внутреннее расстояние элемента? Это всё, что разделяет составные части элемента. В примере выше это расстояние между окружностями одной группы. В случае абзаца текста внутреннее расстояние - это интерлиньяж - расстояние между строками. Для слов - расстояние между буквами.</p>
6
<p>Что такое внешнее расстояние? Это расстояние до другого элемента. В примере выше это расстояние между колонками (блоками) окружностей. Для абзаца - расстояние до другого абзаца или заголовка. Для слов - расстояние до следующего слова.</p>
6
<p>Что такое внешнее расстояние? Это расстояние до другого элемента. В примере выше это расстояние между колонками (блоками) окружностей. Для абзаца - расстояние до другого абзаца или заголовка. Для слов - расстояние до следующего слова.</p>
7
<p><em>Красным отмечено внутреннее расстояние, синим пунктиром - внешнее.</em></p>
7
<p><em>Красным отмечено внутреннее расстояние, синим пунктиром - внешнее.</em></p>
8
<p>Для блока более верхнего уровня - "заголовок+абзац" - внутренним расстоянием является расстояние между заголовком и текстом, а внешним - расстояние между блоками (оно отмечено оранжевым пунктиром).</p>
8
<p>Для блока более верхнего уровня - "заголовок+абзац" - внутренним расстоянием является расстояние между заголовком и текстом, а внешним - расстояние между блоками (оно отмечено оранжевым пунктиром).</p>
9
<p>Вот типичный пример нарушения правил на веб-странице:</p>
9
<p>Вот типичный пример нарушения правил на веб-странице:</p>
10
<p><a>https://codepen.io/hexlet/pen/mBYBdQ</a></p>
10
<p><a>https://codepen.io/hexlet/pen/mBYBdQ</a></p>
11
<p>Заголовки прилепились к чужим абзацам. Расстояния между элементами списка больше расстояния между заголовком и списком - внутренние расстояния оказались больше внешних. Строка с контактами слилась со строкой списка, как будто является её продолжением. Иконка электронной почты одинаково близка и к телефону, и к электронному адресу.</p>
11
<p>Заголовки прилепились к чужим абзацам. Расстояния между элементами списка больше расстояния между заголовком и списком - внутренние расстояния оказались больше внешних. Строка с контактами слилась со строкой списка, как будто является её продолжением. Иконка электронной почты одинаково близка и к телефону, и к электронному адресу.</p>
12
<p><strong>Отредактируйте CSS так, чтобы исправить эти проблемы.</strong></p>
12
<p><strong>Отредактируйте CSS так, чтобы исправить эти проблемы.</strong></p>