Волшебное правило прямоугольников для отступов
Не так давно мы обсуждали мое задание с крутым тим-лидом и он поведал мне очень классное правило об отступах в карточках. И сегодня хочется поведать о нем и вам тоже!
Как только вы определились с контентом в карточке, ее наполнением и тем, как все будет располагаться внутри — окиньте получившуюся карточку взглядом. По какой линии она вытягивается?
Всего ответов может быть 3:
- по горизонтали:
- по вертикали:
- ширина и длина карточки +- равны:
Итак, теперь вы можете отнести вашу карточку к одному из 3ех вот таких прямоугольников:
Наша цель — вписать подходящий прямоугольник в отступы карточки.
Допустим, ваша карточка вытянута по горизонтали и больше похожа на красный прямоугольник. Это значит, что мы должны вписать красный горизонтальный прямоугольник в край карточки — т.е. по бокам отступы делаем побольше, чем сверху и снизу.
На примере ниже показаны 3 варианта отступов: равные, по бокам больше, сверху-снизу больше. Наиболее гармоничным является как раз 2ой вариант, где вписан красный горизонтальный прямоугольник.
Аналогично мы поступаем с вертикальными карточками, которые напоминают синий вертикальный прямоугольник — т.е. отступы сверху и снизу делаем побольше чем по бокам.
Для сравнения 3 вида отступов:
И самый редкий вариант — квадратная карточка, тут все то же самое. Вписываем зеленый квадрат и делаем равные отступы:
У вас конечно возникнет вопрос — а почему так? Я думаю, что это пришло из книг, где контент страницы вытянут вертикально, а отступы сверху и снизу значительно больше боковых.