Почему не работает отрицательный margin?

Question

[acamel98]

У меня есть блок в котором находятся карточки. Сетка на flex, я создаю отступы с помощью нижнего padding и хочу убрать его с помощью отрицательного margin на блок-родитель. По итогу отступ остается. Объясните, почему когда я добавляю на родителя .cards-block { 168px 0 0.1px 0}, то все работает? Это как-то связано со схлопыванием margin ???


CodeOpen - https://codepen.io/acamel98/pen/LYePBJx

Comments

[Ankhena]

Может гриды и gap?
Или column-gap для флексов, если позволяет список поддерживаемых браузеров?

[acamel98]

Ankhena, а подсказать не можете почему так происходит ?

[acamel98]

Ankhena, но даже когда есть снизу контент, то все тоже самое. Добавляешь border - работает, padding 196 0 0.1 0 к самому главному блоку - работает, overflow: hidden - работает. Не понятно почему так :-(

[Ankhena]

acamel98, потому что браузеры решили, что схлопывание это хорошо и избавляет от двойных отступов.
И то, что вы перечислили это как раз методы избавления от эффекта схлопывания и выпадения.