html - 使用 CSS 定义元素之间的间距

Question

我不是 html/css 专家并且一直在尝试实现一些最佳实践。在最近的一个元素中，我完成了 90% 的 <h>, <div>, and <p>标签(例如)在外观元素之前或之后有白色间距，并且间距经常变化。我最近开始将我所有的内联样式移动到外部样式表。当样式是内联时，元素之间有多少空间是非常清楚的。将它们移动到外部文件后，确实不清楚。在查看 html 时，我不知道，“这个 <div> 在它之前或之后有空格吗？它是否从基本样式表中获得它的间距？它是否在其他文件中被覆盖？”

因此，我在我的基础 css 文件中定义了几个类:

.singleSpaceAfter
{
  padding-bottom:1em;
}
.singleSpaceBefore
{
  padding-top:1em;
}
.doubleSpaceAfter
{
  padding-bottom:1.5em;
}
.doubleSpaceBefore
{
  padding-top:1.5em;
}

然后我在我的 <div>, <p>, <h> 中应用这个类元素和它的A)当空间存在时清除B) 类名对于有多少空间(padding-top:1em..1.1em, 1.2em..)足够模糊，所以它很灵活。

在html是内容，css是布局的前提下，我做的是不是疯了？

我的 css 文件非常小，我喜欢这样。如果我必须为所有 <h>, <p> and <div> 指定间距通过元素 id 标记它们将变得非常大和复杂。

我还没有看到其他人应用我上面使用的方法，所以我相当有信心它违反了一些最佳实践，但到目前为止我喜欢它并且它对我来说效果很好。我希望就此是否可行的原因提出一些明智的论据。

---

感谢您到目前为止的所有评论。我确实使用了 Eric Meyer 的 CSS Reset(这是我从另一篇 stackoverflow 帖子中发现的 :-)，但认为它与我的实现无关。

至于在基础中定义额外的间距/边距/填充:这感觉就像我经常(50% 的时间)必须在额外的 css 文件中覆盖它们。我认为这会导致各种“神秘”间距。至于通过元素 id 对每个单独的元素进行样式设置，这似乎真的很困惑。我可能有 100 多个 div/p 元素，并在单独的文件中为每个元素定义填充(每个元素都有两个或三个变体之一)感觉很乱。以及它使 html 的描述性降低。

我描述的方法似乎使 html 非常可读(就空间的来源而言没有歧义)并且 css 总共大约 20 行。

谢谢你真诚地回答我的问题。我期待更多的菜鸟引用

Answer 1

使用 CSS reset ，然后按照您想要的方式设置元素的样式。这确保了浏览器之间的一致性。