html - 两个兄弟元素必须是同一类型才能折叠它们的边距吗？

Question

我正在尝试改善此 Bootstrap 4 卡的外观:

如您所见，About the gig 标题和顶部的 Date 元素之间的间距大于元素本身之间的间距，我想使这个相同。但是，我注意到边距没有塌陷。

这表明带有 About the gig 的 h3 元素有一个 16px 底部边距:

相反，下一个带有 Date 的元素的上边距为 24px:

看起来 About the gig 和 Date 元素之间的间距是 24px + 16px = 40px，而随着 margin collapsing I期望它是 max(16px, 24px) = 24px。

根据 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ，边缘崩溃发生在“相邻的 sibling ”。那里的示例显示了相同类型的元素(例如，两个 p 元素)。元素是否必须属于同一类型才能成为“相邻的 sibling ”？为什么在这种情况下边距没有崩溃？

Answer 1

你可以给顶部的 h3 一个 mb-0 类来删除它的 16px 的边距，这个 16px 是 Bootstrap 的默认 css 规则，但是，我建议把它留在那里，当你不需要它的时候就删除它。

对我来说，它是在 _type.scss 中设置的，但它可以在您的元素的其他地方设置。