
Блочная вёрстка на примере банки с водой
Рассмотрим вёрстку блока с контентом на примере банки с водой: как правильно использовать отступы и не писать лишний код.
Посмотрите на банку с водой и блок, который нужно сверстать:
- банка — это блок,
- стенки и крышка — внутренние отступы (padding),
- вода — контент, содержимое блока.
Лучше, если представим заголовок, абзац и кнопку не водой, а жидкостями с разной плотностью, которые ложатся слоями.
Слои жидкостей упираются в края банки и дно. Прям как элементы внутри блока. Мы помним, что стенки банки — это наши внутренние отступы (padding). Зададим их блоку-контейнеру со всех сторон. На картинке отступы отмечены зелёными линиями.
.choose-block { padding: 16px; }
Содержание
Проблема новичка: игнорировать padding блока-контейнера
Вместо того, чтобы задать padding блоку-контейнеру, новички задают внешние отступы (margin) каждому вложенному элементу. Это нелогично и ухудшает качество вёрстки.
Если нужно изменить отступы, правится padding у блока-банки, а не margin всех вложенных элементов.
.choose-block__title, .choose-block__description, .choose-block__btn { margin-left: 24px; margin-right: 24px; } Плохо: приходится править значения нескольких элементов. |
.choose-block { padding-left: 24px; padding-right: 24px; } Хорошо: правим значения одного элемента. |
![]() |
![]() |
Если появится новый элемент, он будет отталкиваться от стенок блока-банки и выстроится в один ряд с другими элементами.
![]() |
![]() |
Такой блок может жить самостоятельно, не требуя постоянных правок верстальщика.
Проблемы с margin-top и margin-bottom у блочных элементов
Когда мы хотим, чтобы вложенный элемент отталкивался от верхнего блока маржином, изначально ничего не выйдет.
Внешним отступам не от чего оттолкнуться и они выходят за пределы контейнера.
На примере банки: сверху нет стенки из стекла. Там дыра, воздух. Такая же ситуация с margin-bottom. Это как банка без дна. И пока у банки нет дна, элементу внутри не от чего оттолкнуться. Оттолкнуться от воздуха невозможно.

Плохая банка без крышки и дна, из которой всё выпадает.

Надев крышку (padding-top), элемент внутри найдёт опору и его margin будет учитываться в пределах банки. И вернём дно в виде padding-bottom.
.choose-block { padding: 8px 16px; }
И результат
Выводы
- Задав padding блоку, мы даём общую установку для поведения вложенных элементов.
- Вложенный элемент может использовать внешние отступы (margin), когда ему есть от чего отталкиваться. Внутренние отступы блока этому способствуют.