Почему вертикальный margin не замечает блока без border'a?

Question

[Даниил]

Набросал пример:
JsFiddle

Вертикальный margin блока .content не замечает родительского блока .block до тех пор, пока у родительского блока не будет задан border.

Как решить эту проблему?

Спасибо откликнувшимся!

Comments

[Ankhena]

Даниил,

float: left помог))

Какой еще флоат для сеток в современном мире?
В вашем случае нужно использовать padding, а не margin.
Также ни у флексов ни у гридов нет выпадающих margin.

Тут https://webref.ru/course/block-model/margin-collapse есть секция про отмену схлопывания.

[Даниил]

Ankhena, о, да, Вы правы -- лучше дать родителю flex -- помогает.

Answer 1

[Вадим]

Схлопывание margin на MDN
https://habr.com/ru/post/257327/

Comments

[Даниил]

Шок
Впервые о таком слышу..

[Вадим]

Даниил Хачатурян, Век живи - век учись :-)

[Даниил]

Как решить это?? Если мне всё таки надо отступать от контейнера, он ограничен box-shadow, а не бордером...

[Вадим]

Даниил, Я редко с этим встречаюсь. Но в статье с хабра что я скинул точно предлагаются варианты решения.
Моё предложение сходу, если не думать особо - сделайте прозрачный однопиксельный бордер.

[Даниил]

Вадим, я почитал эту страницу, что скинули -- нет там решения, я тоже надеялся что есть)

[Даниил]

Вадим, float: left помог))
Дай бог здоровья