Волшебное правило прямоугольников для отступов

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

Как только вы определились с контентом в карточке, ее наполнением и тем, как все будет располагаться внутри — окиньте получившуюся карточку взглядом. По какой линии она вытягивается?

Всего ответов может быть 3:

• по горизонтали:

• по вертикали:

• ширина и длина карточки +- равны:

Итак, теперь вы можете отнести вашу карточку к одному из 3ех вот таких прямоугольников:

Наша цель — вписать подходящий прямоугольник в отступы карточки.

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

На примере ниже показаны 3 варианта отступов: равные, по бокам больше, сверху-снизу больше. Наиболее гармоничным является как раз 2ой вариант, где вписан красный горизонтальный прямоугольник.

Аналогично мы поступаем с вертикальными карточками, которые напоминают синий вертикальный прямоугольник — т.е. отступы сверху и снизу делаем побольше чем по бокам.

Для сравнения 3 вида отступов:

И самый редкий вариант — квадратная карточка, тут все то же самое. Вписываем зеленый квадрат и делаем равные отступы:

У вас конечно возникнет вопрос — а почему так? Я думаю, что это пришло из книг, где контент страницы вытянут вертикально, а отступы сверху и снизу значительно больше боковых.

Мой Telegram: @G_sh2403
Мой Behance: https://www.behance.net/kate_designer