16 ноября 2017

Блочная вёрстка на примере банки с водой

Рассмотрим вёрстку блока с контентом на примере банки с водой: как правильно использовать отступы и не писать лишний код.

банка с водой и блок, который нужно сверстать
Посмотрите на банку с водой и блок, который нужно сверстать:

банка — это блок,
стенки и крышка — внутренние отступы (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;
}

Хорошо: правим значения одного элемента.

Было: у банки тонкие стенки

Стало: толстые стенки

Если появится новый элемент, он будет отталкиваться от стенок блока-банки и выстроится в один ряд с другими элементами.

Новый элемент выпадает, т.к. у него не прописаны внешние отступы

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

Новый элемент становится, как надо. За отступы отвечает padding блока-родителя

Хорошо: мы изначально задали внутренние отступы блоку-контейнеру и новый элемент выравнивается по общим правилам.

Такой блок может жить самостоятельно, не требуя постоянных правок верстальщика.

Проблемы с margin-top и margin-bottom у блочных элементов

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

На примере банки: сверху нет стенки из стекла. Там дыра, воздух. Такая же ситуация с margin-bottom. Это как банка без дна. И пока у банки нет дна, элементу внутри не от чего оттолкнуться. Оттолкнуться от воздуха невозможно.

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

В результате получаем не то, на что рассчитывали:
Результат вёрстки, когда внешним отступам не от чего оттолкнуться

Надев крышку (padding-top), элемент внутри найдёт опору и его margin будет учитываться в пределах банки. И вернём дно в виде padding-bottom.

.choose-block {
          padding: 8px 16px;
}

И результат
Нормально свёрстанный блок, когда внешне отступы отталкиваются от стенок родителя

Выводы

Задав padding блоку, мы даём общую установку для поведения вложенных элементов.
Вложенный элемент может использовать внешние отступы (margin), когда ему есть от чего отталкиваться. Внутренние отступы блока этому способствуют.