块级文本标签；智能CSS边距

Question

我使用 CSS 重置，将大部分所有内容的边距和填充归零（这是 Meyer重置），当然包括块级文本标签。

我正在尝试恢复文本边距，但仅限于后跟块级文本标记的块级文本标记。

有没有比以下更易于管理的方法来实现这一目标？

h1 + h1, h1 + h2, h1 + h3, h1 + h4,
h1 + ol, h1 + ul, h1 + p, h2 + h1,
h2 + h2, h2 + h3, h2 + h4, h2 + ol,
h2 + ul, h2 + p, h3 + h1, h3 + h2,
h3 + h3, h3 + h4, h3 + ol, h3 + ul,
h3 + p, h4 + h1, h4 + h2, h4 + h3,
h4 + h4, h4 + ol, h4 + ul, h4 + p,
ol + h1, ol + h2, ol + h3, ol + h4,
ol + ol, ol + ul, ol + p, ul + h1,
ul + h2, ul + h3, ul + h4, ul + ol,
ul + ul, ul + p, p + h1, p + h2,
p + h3, p + h4, p + ol, p + ul,
p + p{
    margin-top: 0.5em;
}

我知道这是不完整的（块引用等。），但它描绘了图片。

---

更完整的版本：这增加了不同块级文本元素之间的空间；例如，它将在 h1 + p 之间添加，但不会在 h2 + h2 之间添加（注意，我没有专门使用它，但这是我可能会做的事情除非有更好的替代表面）
_{（另请注意，我刚刚意识到这排除了一些组合，例如 p + p。只要假装它们在那里）}

h1 + h2, h1 + h3, h1 + h4, h1 + ol, h1 + ul, h1 + p,
h1 + dl, h1 + pre, h1 + blockquote, h1 + address, h2 + h1, h2 + h3,
h2 + h4, h2 + ol, h2 + ul, h2 + p, h2 + dl, h2 + pre,
h2 + blockquote, h2 + address, h3 + h1, h3 + h2, h3 + h4, h3 + ol,
h3 + ul, h3 + p, h3 + dl, h3 + pre, h3 + blockquote, h3 + address,
h4 + h1, h4 + h2, h4 + h3, h4 + ol, h4 + ul, h4 + p,
h4 + dl, h4 + pre, h4 + blockquote, h4 + address, ol + h1, ol + h2,
ol + h3, ol + h4, ol + ul, ol + p, ol + dl, ol + pre,
ol + blockquote, ol + address, ul + h1, ul + h2, ul + h3, ul + h4,
ul + ol, ul + p, ul + dl, ul + pre, ul + blockquote, ul + address,
p + h1, p + h2, p + h3, p + h4, p + ol, p + ul,
p + dl, p + pre, p + blockquote, p + address, dl + h1, dl + h2,
dl + h3, dl + h4, dl + ol, dl + ul, dl + p, dl + pre,
dl + blockquote, dl + address, pre + h1, pre + h2, pre + h3, pre + h4,
pre + ol, pre + ul, pre + p, pre + dl, pre + blockquote, pre + address,
blockquote + h1, blockquote + h2, blockquote + h3, blockquote + h4, blockquote + ol, blockquote + ul,
blockquote + p, blockquote + dl, blockquote + pre, blockquote + address, address + h1, address + h2,
address + h3, address + h4, address + ol, address + ul, address + p, address + dl,
address + pre, address + blockquote{
    margin-top: 0.625em;
}

Answer 1

我认为你可能在这里过度编码，也就是说，试图预测每种情况，而许多情况永远不会或很少发生。

例如，我认为您不太可能需要设置

h1 + h1

样式，因为不应该出现在您的代码中。

许多标题到标题组合也是如此。

此外，如果您执行此操作

h1 + p 和 p + h1 以及 h1 + h1 和 p + p以及所有其他变体，

您不妨这样做

h1, p { // }

我的建议与 @Pawel，就做

h1, h2, h3, h4, h5, h6, p, ul, ol //and others// {
    margin-top: 0.5em;
}

如果你必须按照建议的方式去做，我会简化如下

h1 + ol, h1 + ul, h1 + p,
h2 + ol, h2 + ul, h2 + p,
h3 + ol, h3 + ul, h3 + p,
h4 + ol, h4 + ul, h4 + p{
    margin-top: 0.5em;
} 

......然后设置其他样式仅根据需要进行配置。

Answer 2

虽然不是理想的解决方案，HTML5 Boilerplate 包含 CSS 重置称为 normalize.css 尝试保持基本样式。

这并不完全是您想要的，但可能会给您一些想法。

此外，根据您做事的方式，诸如 LESS 之类的东西可能会在管理您的 CSS 的同时你开发这个会更容易一些。

Answer 3

你见过http://meyerweb.com/eric/tools/css/reset/ ?

这是你想要的吗？

编辑：（怎么样）

h1, h2, h3, h4, h5, h6, p, blockquote,
 form, label, ul, ol, dl, fieldset, address {
    margin-top: 1.5em;
}