css - 使用 CSS 边距创建空间的最佳做法是什么？

Question

有时我需要在元素之间留出空间，例如在标题和框之间。我看到的所有示例都将 margin-top 属性添加到 box 或 margin-bottom 到标题。但这些影响无处不在。如果我希望它具有特定于页面的边距等。最佳做法是什么？我应该只在 html 中使用样式元素，还是应该在 CSS 中创建类似的规则并使用类？

.margin-top-10px { margin-top: 10px }
.margin-top-15px { margin-top: 10px }
...

这是一个好习惯吗？CSS中是否过于混乱？

Answer 1

请不要那样做。你最终会陷入无法维护的混乱局面。

例如，如果您在特定页面上有一个比平时需要更多空间的标题，请给它自己的类：

.lonelyheader {
  margin-bottom: 10pt;
}

请记住，您可以组合多个类，因此您仍然可以与其他标题共享样式：

.heading {   
  font-weight: bold;
  padding: 3pt;
}

接着：

<div class="heading lonelyheader">etc.</div>