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;
}

我知道这是不完整的（ blockquote等等。）但是它描绘了这幅画。

更完整的版本：这会在不相同的块级文本元素之间增加空间;例如，它会在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

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

这不完全是你所追求的，但可能会给你一些想法。

此外，根据您的工作方式，LESS之类的内容可能会让您在开发CSS时更轻松地管理您的CSS。

Answer 2

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

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

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 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;
}

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

3 个答案: