【问题标题】：Where do you put your CSS Margins? [closed]你把你的 CSS 边距放在哪里？ [关闭]
【发布时间】：2010-09-11 11:48:27
【问题描述】：

当您想在 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 工作时，我都会觉得有一个很好的经验法则可以应用……但我不确定它是什么。有没有人有好的论据？

【问题讨论】：

标签： css margin

【解决方案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”方法仍然适用于我。当然，我是从“元素”CSS 框架中挑选的技术。

【讨论】：

如果您不介意回避 IE6，您可以随时使用 CSS2 :first-child 和 :last-child 伪选择器来进行竞标！
根据quirksmode.org/css/contents.html的说法， :last-child 仅在 IE9 中支持，所以如果要在 IE7/IE8 中有适当的边距，仍然需要使用类。 :(

【解决方案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有上边距。

【讨论】：

【解决方案3】：

如果您想在元素周围留一些空间，请给它一个边距。这意味着，在这种情况下，不要只给 <h1> 一个下边距，而是给 <p> 一个上边距。

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

h1, p { margin: 1em; }

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

...会导致标题和段落之间有 1em 的空间。

【讨论】：

【解决方案4】：

这将部分由您设计的具体内容驱动，但在例如典型的博客索引中，这些内容有一种粗略的层次结构：

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

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

这是一个缩略图。最终如何分配填充完全取决于您，但是如果您从自下而上的角度来处理它，您可能会在调整 first 最常见/丰富的元素和然后稍后不常见的。

【讨论】：

【解决方案5】：

Jim 的观点是关键。元素之间的边距塌陷，它们不是相加的。如果您想要确保段落和标题上方和下方有 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;
}

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

应该是这样的：

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

现在您不必担心什么元素是第一个，什么元素是最后一个，并且您不必总是在最后一个元素上放置一个特殊的类。

这不会“工作”的唯一时间是最后一个孩子是未渲染的孩子。在这种情况下，您可以考虑使用您最后一个可见孩子的类来应用 margin-bottom:0;。

【讨论】：

【解决方案8】：

我倾向于同意您的观点，即第一个选项更好。这通常是我喜欢做的事情。但是，有一个论点是，您应该为这些元素中的每一个指定一个边距，如果您不想应用它，则将其清零，因为浏览器处理边距的方式都不同。如果没有指定，

（我认为也是

标签）通常会有浏览器给出的默认边距。

【讨论】：

【解决方案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 等，结构会更好:)

【讨论】：