Question

当你想在HTML元素之间添加空格（使用CSS）时，你附加了哪个元素？

我经常遇到这样的情况：

<body>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div>This is a footer</div>
</body>

现在，我想在每个元素之间需要1em的空间，但是没有在第一个h1之上或者在最后一个div之下。我会附加哪些元素？

显然，这之间并没有真正的技术差异：

h1, p { margin-bottom: 1em; }

......而这......

div { margin-top: 1em; }
p { margin-top: 1em; margin-bottom: 1em }

我感兴趣的是次要因素：

一致性
适用于所有情况
轻松/简洁
易于进行更改

例如：在这个特殊情况下，我会说第一个解决方案比第二个更好，因为它更简单;您只是在一个属性定义中将margin-bottom附加到两个元素。但是，我正在寻找更通用的解决方案。每次我做CSS工作时，我都觉得有一个很好的经验法则可以应用......但我不确定它是什么。有没有人有好的争论？

Answer 1

当我希望它们在下一个元素之前有空格时，我倾向于在元素上使用下边距，然后在css中使用“.last”类来删除最后一个元素的边距。

<body>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div class="last">This is a footer</div>
</body>

div { margin-bottom: 1em; }
p { margin-bottom: 1em; }
h1 { margin-bottom: 1em; }
.last {margin-bottom: 0; }

在你的例子中，这可能不适用于，因为页脚div很可能拥有它自己的类和特定的样式。当我有一个接一个的几个相同的元素时（段落和什么不是），我使用的“.last”方法仍适用于我。当然，我从“Elements”CSS框架中挑选了这项技术。

Answer 2

使用高级CSS 2选择器，可以使用另一种不依赖于类last将布局信息引入HTML的解决方案。

解决方案使用adjacent selectors。不幸的是，MSIE 6还不支持它，所以不愿意使用它是可以理解的。

h1 {
    margin: 0 0 1em;
}

div, p, p + h1, div + h1 {
    margin: 1em 0 0;
}

这样，第一个h1将没有上边距，而紧跟在段落或框之后的任何h1 有一个上边距。

Answer 3

如果你想要一个元素周围的空间，给它一个余量。这意味着，在这种情况下，不要只给<h1>一个底部边距，而是给<p>一个上边距。

请记住，当两个元素垂直相邻且它们之间没有边框或填充时，它们的边距会崩溃。这意味着只考虑两个边距中较大的一个 - 它们不会加在一起。所以这个：

h1, p { margin: 1em; }

<h1>...</h1>
<p>...</p>

...会在标题和段落之间产生1em空格。

Answer 4

这部分是由你所设计的具体细节所驱动，但对于这些事情，例如一个典型的博客索引，有一种粗略的持续性：

您将在页面上有一个页脚。
每个条目将有一个标题。
每个条目你都会有n个段落。

为你的段落建立空白，知道它们有时会按顺序发生 - 你需要担心它们看起来像一个系列。从那里，调整标题以处理条目之间的边界。最后，调整页脚/体间距以确保页面底部看起来不错。

这是一个缩略图。你最终如何最终分配你的填充完全取决于你，但如果你从自下而上的角度来看，你可能会看到更少的惊喜，因为你首先调整最常见/丰富的元素和然后以后不常见的那些。

Answer 5

吉姆的观点是关键。边缘在元素之间崩溃，它们不是附加的。如果您想要的是确保段落和标题上方和下方有1em边距，并且在页眉下方和页脚上方有1em边距，那么您的CSS应该反映出来。

鉴于此标记（我添加了标题并在页眉/页脚上放置了ID）：

<body>
  <div id="header"></div>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div id="footer">This is a footer</div>
</body>

你应该使用这个css：

#header {
  margin-bottom: 1em;
}

#footer {
  margin-top: 1em;
}

h1, p {
  margin: 1em 0;
}

现在元素的顺序无关紧要。如果您使用两个连续的标题，或者使用段落而不是标题来启动页面，它仍然会呈现您标记的方式。

Answer 6

我是一个相对的新手，但我自己的解决方案，我认为你和我都反对（改变一个标签的边距可能会在网站的一个部分中找出间距，只是为了扰乱以前的良好间距其他地方？）现在为所有标签分配一个相等的上下边距。您可能希望H1上方和下方的空间比H3或ap更多，但总的来说，我认为页面看起来很好，在任何给定的文本上方和下方都有相同的空格，所以这个解决方案对我很有用并且符合您的简单经验法则，规则也是如此！

Answer 7

这是应该做的：

body > * {
    margin-bottom: 1em;
}
body > *:last-child {
    margin-bottom: 0;
}

现在你不必担心首先是什么元素，最后一个元素是什么，你不必总是在你的最后一个元素上放置一个特殊的类。

这是唯一一次赢得工作＆＃34;是最后一个孩子是未呈现的孩子。在这种情况下，您可以考虑在最后一个可见的孩子身上使用课程margin-bottom:0;。

Answer 8

我倾向于同意你的看法，第一种选择更好。这通常是我喜欢做的事情。但是，有一个论点要求你应该为每个元素指定一个余量，如果你不想应用它，则将其归零，因为浏览器都以不同的方式处理边距。＆lt; p＆gt; （如果没有，我认为＆lt; h1＆gt;标签）通常会有浏览器给出的默认边距。

Answer 9

我刚刚使用了第一个孩子和最后一个孩子。例如在纯CSS中：

h1{
    margin-top:10px;
    margin-bottom:10px;
}
h1:first-child{
    margin-top:0px;
}
p{
    margin:10px;
}
p:first-child{
    margin-top:0px;
}
p:last-child{
    margin-bottom:0px;
}

这是一个基本的例子，但你可以将它应用于更多元素，如果使用SASS，LESS等结构更好：）

你把CSS边距放在哪里？

9 个答案: