Приветствуется максимально гибкая верстка, с возможностью добавления нескольких блоков текста и новых элементов.

Необходимо знать, как будут вести себя блоки при верстке или после изменений. К грамотным решениям относятся правила организации отступов. С их помощью можно улучшить и масштабировать верстку, а также избежать большей части типичных ошибок.

Правила работы с отступами

Сайт или документ обязательно имеет свой «поток» — вывод объектов в документе. В верстке поток отмечается сверху вниз, слева направо. Если элемент на макете расположен справа, в HTML-коде он будет числиться последним в группе.

С учетом перечисленного формулируется первый принцип.

1. Формирование отступов выполняется от предыдущего элемента к следующему
В верстке используются CSS-свойства margin-right и margin-bottom, с отступом справа и отступом снизу. В итоге блок фиксируется благодаря своим отступам и сам двигает соседние.

2. Отступы выполняются между соседними элементами в потоке
При отсутствии соседнего блока с левой стороны нельзя задавать ему отступ слева.

3. Обнуление отступа последнему элементу группы
Действие проводится с помощью псевдоклассов в CSS. С помощью last-child, который выбирает последний элемент из группы.

4. Отступы не задаются БЭМ-блокам
Следующий принцип имеет отношение к специальному подходу к именованию классов. Рассмотрим на примере такой сущности, как БЭМ-блок. Он размещается в любом месте сайта, и стили переносятся вместе с ним.

Если БЭМ-блок используется в шапке и в подвале сайта, то в шапке ему нужен отступ, а в подвале — нет.

Если задать блоку отступы, то может возникнуть проблема. Отступы появятся во всех местах, ведь стили БЭМ-блока переносятся. Поэтому отступы выполняются через модификаторы или миксование классов.

Отступы в карточке

Как лучше поступить в примере с реализацией карточки на сайте?

Берется стандартная карточка с заголовком, картинкой и описанием. По каким правилам делаются отступы у заголовка и описания? Ответ прост: применяются вышеупомянутые принципы.

При необходимости текст карточки оформляется в блок и задается внутренний отступ — padding. Таким образом верстка соответствует сразу трем принципам. Для воспроизведения отступа между заголовком и описанием, можно сделать отступ снизу — для заголовка.

В итоге

Напомним основные принципы работы с отступами:

• Выполняются от предыдущего элемента к следующему.
• Задаются между соседними элементами в потоке.
• Обнуляется отступ последнему элементу группы.
• Не задаются отступы БЭМ-блокам.

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

Заказать адаптивную HTML-верстку

Веб-разработчиками создаются сайты, приложения и сервисы для ежедневного использования. Разрабатываются интернет-магазины, поисковики, онлайн-банки, карты, почтовые клиенты и т. д. Также в задачи веб-разработчиков входит проектирование внешнего вида сайта и программирование сервисной части.