Блок отодвигает все секцию, вместо себя(margin-top), что делать?

Question

[Виктор Кокорич]

Вот ссылка на песочницу, помогите, кто может: https://codepen.io/velineeyt-gmail-com/pen/RwVRYdG

Comments

[Сергей delphinpro]

Гуглить что такое схлопывание внешних отступов (марджинов).

Answer 1

[Сергей delphinpro]

Если не хочется гуглить и думать, то есть несколько вариантов решения.

1. Задать границу для внешнего блока (.black)
2. Задать паддинг для внешнего блока (можно 1px)
3. Создать новый поток (контекст) внутри внешнего блока (честно говоря забыл как это называется)/ Новый контекст создается если задать overflow отличный от visible, внутри flex и grid контейнееров, внутри таблиц, внутри плавающих элементов (float) и может еще что-то подзабыл.
4. Использовать паддинг вместо марджина для внутреннего элемента.
5. Не использовать марджин на внутреннем элементе, и заменить его на паддинг у внешнего.
и т.д.