17

当您想在 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 }

我感兴趣的是次要因素：

  1. 一致性
  2. 适用于所有情况
  3. 轻松/简单
  4. 易于进行更改

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

4

9 回答 9

7

当我希望元素在下一个元素之前有空间时，我倾向于在元素上使用底部边距，然后在 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 框架中挑选出的技术。

于 2008-09-19T22:32:55.740 回答
4

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

该解决方案使用相邻的选择器。不幸的是，MSIE 6 还不支持它，所以不愿意使用它是可以理解的。

h1 {
    margin: 0 0 1em;
}

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

这样，第一个h1不会有上边距，而h1紧跟在段落或框之后的任何东西都有上边距。

于 2008-09-21T17:44:15.123 回答
3

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

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

h1, p { margin: 1em; }

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

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

于 2008-09-19T23:03:56.960 回答
2

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

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

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

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

于 2008-09-19T22:34:59.417 回答
2

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

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

于 2008-09-21T05:35:17.700 回答
1

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

于 2009-04-25T10:12:24.450 回答
1

应该这样做：

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

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

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

于 2016-01-14T21:05:18.463 回答
0

我倾向于同意你的观点，第一个选择更好。这通常是我喜欢做的事情。但是，有一个论点是，您应该为这些元素中的每一个指定一个边距，如果您不想应用它，则将其归零，因为浏览器处理边距的方式都不同。如果没有指定， <p> （我认为也是 <h1> 标签）通常会有浏览器给出的默认边距。

于 2008-09-19T22:33:21.060 回答
0

我刚刚使用了第一个孩子和最后一个孩子。例如，在纯 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 等，结构会更好:)

于 2015-11-27T10:13:35.827 回答