css - 为所见即所得内容设置固定边距/填充

Question

我有一个页面，其内容来自所见即所得的编辑器。我希望 HTML 元素具有一些固定的边距/填充，例如“h2”元素的边距底部始终为 20px，段落文本的边距顶部为 10px。所以问题是当“h2”元素之后有一个“p”标签时，“h2”和“p”之间的空间会增加。它们之间的间距是 h2 的 margin-bottom 和 p 的 margin-top 相加，即 30px。如果“p”标签的下边距为 10p，并且“p”标签内的“span”的上边距为 5px，情况也是如此。

我们能否始终将其限制为 20px？如果父元素有 margin-bottom 属性，我们是否可以忽略子元素 margin-top 属性？

我尝试过使用 h2+p {margin-bottom: 20px;} 效果很好，但这不仅仅是关于“p”标签，因为内容是动态的，我们可以期待任何 HTML 元素，如 h3、div、span等等……

你能帮我解决这个问题吗？

Answer 1

我认为你能得到的最接近的是所谓的“ margin 崩溃”，你可以在这里阅读:
CSS - Margin-Bottom ignored when Margin-Top exist

这适用于 block 元素，如“div”、“p”等，但不适用于内联元素，如“span”、“img”等。

除此之外，您还需要添加一些 javascript 来遍历元素集合并根据您需要设置的一组规则调整边距。