Как заполнить целиком фон блока в CSS, если у потомка устанволен margin?

Question

[Роман Кофф]

Фон отрисовывается под потомком, при этом если у него установлен margin, то сверху и снизу будут полосы не заполненные фоном. Для решения этой проблемы я указываю border. Тогда пустых полос нет.

Как убрать полосы без использования border?

https://jsfiddle.net/RomanKoff/qftbwu0c/6/

Answer 1

[Ankhena]

Этот эффект называется выпадением и схлопыванием вертикальных margin.

Лечится с помощью border, заменой margin на padding или указанием минимального padding. Также отсутствует у флексов и гридов. И несколько других способов.
htmlbook.ru/index.php/samlayout/blochnaya-verstka/...

И у вас яркий пример неверно сформулированного вопроса. Потому что родитель в обоих случаях закрашен целиком.

Comments

[Роман Кофф]

ОК. Не очень корректно сформулировал вопрос. Мне нужно, чтобы у потомков тоже был свой фон, вот пример: https://jsfiddle.net/RomanKoff/mtajwx0y/1/

Не понял, где я в таком случае должен margin на padding поменять.

[bingumd]

Роман Кофф, у потомков убрать margin, родителям добавить padding.

[Ankhena]

Роман Кофф,

Не понял, где я в таком случае должен margin на padding поменять.

Задать родителю padding, у дочернего убрать margin.

[Александр Васильев]

Добрый день.
У Вас яркий пример правильно оформленного вопроса )))
Это ценно.