使用<div>间距是一种不好的做法吗？

Question

使用 <div> 标签来表示元素之间的空隙是不好的编程实践吗？如果是，为什么呢？

这里有一个例子：

<div class="panel">
    <!-- Content -->
</div>

<div class="spacer"></div>

<div class="panel">
    <!-- Content -->
</div>

CSS:

div.spacer
{
    font-size: 0; 
    height: 10px;
    line-height: 0;
}

- Emanuil Rusev

---

我认为这个问题很值得商榷。毕竟，间隔符在很大程度上是一种表现元素。但如果您需要使用它们来清除浮动，那就是另一回事了。 - BoltClock

在编写spacer div时，几乎总有更好的方法。在99%的情况下，您不需要它。这是一个例子，在该例子中，它被认为是必需的。(我的br很容易就可以替换成div)。 - thirtydot

我正在使用一系列摘要div，每个摘要div后面跟着一个可折叠的div，当单击摘要div时，它会打开或关闭。在这种情况下，边距是一个麻烦，每个可折叠div下面的间隔div是最简单的解决方案。 - Elise van Looij

Answer 1

如果您给content添加了边距，那么情况就不好了。否则，它是用于间隔的最佳HTML元素。

- Aaron Digulla

Answer 2

没错，这是不好的——不必要的标记。使用 margin-top / margin-bottom 替代。

- benhowdle89

---

是的，这样做会增加一些标记，但它能使设计更模块化。你可以用另一个元素替换第二个 div.panel，而间隙仍将保留。这不是很好吗？ - Emanuil Rusev

如果您选择坚持使用所有的margin-bottom，则在替换div时，间隙将保持不变。 - benhowdle89

不是重点。重点是当你使用页边距时，间隔取决于特定的元素。 - Emanuil Rusev

不确定事实是否真的如此绝对。这样做可以大大简化布局的维护，只需牺牲少量HTML字节即可。它使CSS文件保持最小化，并允许您快速调整空白间距。 - Shawn Whinnery

之所以被认为“不好”只是因为人们将间隙视为物体之间的距离，而不是一种事物。事实上，这两种情况都可能发生。如果你将7个类似的物品放在一起，想在它们之间放置一个分隔符，建议使用一个单独的元素作为分隔符。这样，所有同级别的项的标记和样式可以保持一致，你的结构也保持一致。边距有其用途，但绝不是“在第三个元素后面加一些间隙”，即使你可以通过CSS做到。不要陷入简化的思维中。 - dkellner

Answer 3

这是不符合语义且没有必要的。

通过添加以下内容：

padding-bottom: 10px;

或者

margin-bottom: 10px;

通过向您的CSS声明中添加div.panel，您可以节省多个字符（从而减少带宽成本）并拥有更干净的代码，表达您的意图而不是您想要的外观。请注意保留HTML标签。

- Sean Vieira

---

你说得没错，但我得笑笑你那大概 50 字节的带宽成本。兄弟，你太抠门了！ - bpeterson76

@bpeterson76 -- 笑 确实听起来像是这样！:-D 我想象中的标记比这个多得多，每个页面上都重复了 div.spacer 多次。(公平地说，只有当你变得很大时，这才会开始伤害口袋...但这确实是反对这种做法的另一个论点;-) ) - Sean Vieira

@SeanVieira 看起来像是微小的优化。如果你正在处理 Google 主页，那当然可以这样做。否则，我几乎可以保证你有更大的问题需要解决。 - Dan Bechard

它可以比边距或填充更语义化 - 这取决于间隔代表什么。它可以是一个距离，可以是一个分隔符，也可以是稍后出现的某些内容的占位符。拇指规则是：如果间隔属于一个元素（该元素只需要在任何位置都有间隔），则将其设置为边距。如果没有元素单独需要间隔，但两个元素需要它（例如它们之间），则使用额外的div。然后它有自己的目的。 - dkellner

Answer 4

这不是一个适合 Web 开发的良好编程样式。

所有（块级）元素都包含了你需要创建内边距/布局所需的一切。 就像其他人提到的，使用 margin、padding 等 - 盒子模型。

过多的标记语言 = 更多定位问题 = 不必要的标记语言。

- ChrisBenyamin