css - 流入 sibling 之间的未崩溃的利润率

Question

这就是让我夜哭的原因。人们会希望 CSS 有一个指令 margin-collapse:none;，但唉，那是我的想象。

如何让两个流入的 sibling 不崩溃？

我在元素上和生成元素之前都尝试过overflow:hidden, clear:both, border:1px solid white,什么都没用。

这是 the example . H2 被从流程中移除，以在侧面看起来很漂亮，而不是崩溃，而 H3 无论如何都坐在那里与其前身崩溃。现在边距折叠使得 H2 和 H3 以连贯的方式垂直对齐，独立于前面的元素是不可能的。

约束:不能添加 HTML 标记，因为内容是通过 Markdown 生成的。

这可以解决吗？

编辑:事实上，这里的目标是让 h2 和他们的第一个 h3 出现在相同的高度。

Answer 1

一个解决方案

在您的特定情况下，您似乎不一定需要将 h2 移出流程，而是将其设置为 position: relative，因为 it should achieve the effect你想要的。

但是，这并不能真正解决您的 margin 崩溃问题。

另一种解决方案

如果将 h2 之后的 h3 设置为 display: inline-block，使用...

h2+h3 {display: inline-block;}

...然后it resolves your collapsing issue ，假设您没有 inline elements immediately following h3 标签。您似乎计划在 block 级 p 标记中添加任何后续文本，因此这应该不是问题。