Если коротко, то внутреннее должно быть меньше внешнего.
Например, у нас на сайте есть блок вот такого вида:
Во-первых, блок взаимодействует с соседними блоками.
На скрине это красные полосы сверху и снизу. Расстояние 1 внутри блока должно быть самым большим — это расстояние между крайними элементами и соседними блоками.
Во-вторых, внутри блока между собой взаимодействуют его элементы.
Заголовок и подзаголовок — это одна сущность, а элементы списка — другая. Чтобы это показать визуально, расстояние 2 нужно сделать меньше, чем расстояние 3.
Вот ещё одна иллюстрация правила:
Рамка под текстом — это одна сущность. А надзаголовок, заголовок, описание и кнопка — другая. Расстояние между сущностями 1 и 2 должно быть больше, чем расстояние между элементами сущности 2.
По такому принципу должны работать все объекты в макете
Расстояние между внутренними объектами одной сущности всегда должно быть меньше, чем расстояние между сущностями. Применение только этого правила сделает ваш дизайн в 2 раза опрятнее и лучше.
Как работать с правилом в любых ситуациях?
Главное — понять, к чему относится объект. К чему он относится, к тому он и должен быть ближе. Среди 3 объектов два всегда относятся друг к другу сильнее, чем третий.
Улучшайте свои макеты :)