Теория близости гласит, что чем больше связаны объекты между собой, тем ближе они будут находиться.
Правило внутреннего и внешнего относится к теории близости и распространяется на абсолютно все элементы интерфейса.
внутреннее ≤ внешнее
Если пробелы между словами будут меньше чем трекинг, то слово просто распадётся. Или слипнется. Такой текст будет тяжело прочесть.
![](https://static.tildacdn.com/tild3964-6362-4531-a363-643631386133/D182D180D0B5D0BAD0B8.png)
Пробел между словами будет меньше, чем интерлиньяж (межстрочное расстояние).
Также интерлиньяж не может быть меньше высоты прописных букв.
![](https://static.tildacdn.com/tild6437-6333-4265-a331-356466366232/D098D09DD0A2D095D0A0.png)
Если в полиграфии новый абзац начинается с красной строки, то в дизайне интерфейсов абзацы отделяет между собой пробельная строка.
Если рассматривать абзац как отдельный элемент, то интерлиньяж будут внутреннее, а пробельная строка между абзацами — внешнее.
![](https://static.tildacdn.com/tild3866-3631-4161-b036-633464346564/34.png)
Это касается не только абзацев, но и списков. Расстояние между отдельными пунктами будет больше чем интерлиньяж.
![](https://static.tildacdn.com/tild3132-6464-4139-b361-333765663565/35.png)
Теперь добавим к тексту заголовок. Все абзацы между собой связаны друг с другом больше, чем текст с заголовком. Поэтому пробельная строка будет меньше, чем расстояние от заголовка до текста.
![](https://static.tildacdn.com/tild3930-6137-4535-b730-326139613633/36.png)
Если заголовок в две или более строк, то убедитесь, что внутренний отступ в заголовке меньше внешнего.
![](https://static.tildacdn.com/tild6136-6165-4061-b235-646336626364/37.png)
В этом примере есть заголовок и карточки. Каждая карточка состоит из подзаголовка и текста. Все элементы внутри карточек связаны друг с другом больше, чем заголовок с карточками. Поэтому этот отступ здесь будет внешним, а расстояние от подзаголовка до наборного текста — внутренним.
![](https://static.tildacdn.com/tild6335-3763-4130-a162-396534316132/40.png)
Если рассмотрим отдельный блок, то заголовок, текст и изображение в нем составляют единое целое. Внешнее здесь — отступы от границы блока до контента. Внутреннее — от заголовка до текста.
Если в блоках нет смены цвета, то благодаря правильным отступам мы понимаем, где начинается и заканчивается блок. Ведь отступы между блоками будут здесь самыми большими. Соответственно, заголовок будет ближе к своему блоку, чем к предыдущему.
![](https://static.tildacdn.com/tild6162-3231-4430-a531-626432396466/38.png)
Если текст размещён на подложке, то отступ от текста до границ будет внешним и бОльшим.
![](https://static.tildacdn.com/tild3830-3863-4366-b434-363863653536/39.png)
Это же правило можно применить к кнопкам: внешние отступы будут больше, чем высота прописных букв.
![](https://static.tildacdn.com/tild3931-6337-4335-b434-636365336365/41.png)
Проверьте, как хорошо вы усвоили информацию → пройти тест