Должны ли два родственных элемента быть одного типа, чтобы их поля обрушились?

Question

Я пытаюсь улучшить этот внешний вид этой карты Bootstrap 4:

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

Это показывает, что элемент h3 с О концерте имеет нижнее поле 16px:

И наоборот, следующий элемент с Date имеет верхнее поле 24px:

Может показаться, что интервал между элементами About gig и Date равен 24px + 16px = 40px, тогда как при уменьшении поля я ожидал, что он будет max(16px, 24px) = 24px.

Согласно https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing, свертывание полей происходит для "соседних братьев и сестер". Приведенные здесь примеры показывают элементы одного типа (например, два элемента p). Должны ли элементы быть одного типа, чтобы быть "смежными братьями и сестрами"? Почему в этом случае поля не падают?

Answer 1

Вы можете добавить класс к h3 mb-0 (этот класс удалит нижнее поле).

Answer 2

Вы могли бы дать верхнему h3 класс mb-0 для удаления его 16px маржи, этот 16px является правилом css по умолчанию для начальной загрузки, однако я рекомендую оставить его там и просто удалить его, когда он вам не нужен.

Для меня это набор в _type.scss, но он может быть установлен в другом месте для вашего проекта.