WEB上的垂直间距？

Posted 2023-03-05

【中文标题】WEB上的垂直间距？

【英文标题】：Vertical spacing on the WEB?

【发布时间】：2015-06-11 07:36:00

【问题描述】：

问题

我一直想知道是否有某种标准、规范或 CSS 框架，其中包含关于如何在元素之间添加统一垂直间距的定义或指南？

当我考虑为 Web 编码时，我总是把它想象成一个漂亮的网格，其中列之间或水平堆叠的元素之间有一个统一的水平间距，元素之间也是一个统一的垂直间距。

但是实现这一目标的最佳方法是什么，最好结合使用 Twitter Bootstrap 作为 WordPress 主题？

---

边距折叠

我的第一个想法总是在元素上设置margin-top: 50px; margin-bottom: 50px。然后，当它们一个接一个地流动时，由于margin collapsing，它们之间总是会有精确的50px 间隔。

我仍然认为这是一种非常好的方法，因为您不必担心元素是第一个、最后一个还是介于两者之间的某个元素。

此外，即使嵌套元素，边距仍然会塌陷！

请参阅以下示例，其中嵌套元素使用填充而不是边距（不会折叠）：http://jsfiddle.net/8wwrwy90

您可以清楚地看到垂直排水沟并不均匀。

现在查看带有边距的相同示例，它确实会折叠：http://jsfiddle.net/9rLaLso7/1

无论嵌套多深，边距都会塌陷到根元素，并且间距保持一致。简直太美了。

---

问题

正如您可能想象的那样，这种方法存在问题，这正是我遇到的问题。边距只会在特定条件下崩溃，很多事情都会破坏它，从有间隙、设置垂直填充到浮动。

所以，我的一般问题是与其他很棒的 Twitter Bootstrap 网格系统有关。简单地说，列使用float: left，所以从你进入列的那一刻起，就没有更多的边距折叠了。

这简直破坏了一切。

所以，我已经开始寻找解决这个问题的技巧，但还没有真正找到好的解决方案。

只是为了让您将问题可视化，这里有一个小提琴：http://jsfiddle.net/19Leuhsq/1

我好的解决方案将是一种允许崩溃（我相信当前网格系统的制作方式不会发生这种情况）或“补偿”它的解决方案。如果能够将行嵌套到行中......并且在视觉上仍能获得相同的结果，那将是很好的。

对我来说，能够在任何地方使用任何元素很重要，因为标记将由用户从 WordPress 的管理面板自动生成和构建。因此，我不能真正依赖硬编码距离或过于复杂的规则，例如 if this is in that 或 if that 随后，但没有子元素或是最后一个元素 等等

---

总结

如果有人能指出我正确的方向，我将不胜感激。也许我的方法是错误的，也许有或没有“标准”解决方案......

我愿意接受任何和所有建议。

【参考方案1】：

是的，有一种称为FlexBox 的不同渲染模式可以解决所有这些问题 (top-tier browsers only)。

【讨论】：

这值得研究，但我不确定我到底该如何使用它，因为据我所知，FlexBox 不支持边距折叠...

【参考方案2】：

出于这个原因，我倾向于避免使用上边距。您可以只使用底部的边距并将 div 包装在具有顶部填充的容器中以补偿第一项。

div:not([class]) 
    margin: 0 0 50px;
 

http://jsfiddle.net/19Leuhsq/2/

【讨论】：

这是一个有趣的解决方案，但您是否也可以修改它以考虑嵌套在列中的元素中的行：jsfiddle.net/19Leuhsq/6 我认为这可能会奏效。

@TonyBogdanov 我认为在这种情况下，您应该为具有内容的元素容器提供不同的类，这样它们就不会获得保证金。

@johnnyd23 我认为您的解决方案的修改版本可能会成功。以下是应该添加的内容：如果一个 non-margin-collapse-propagating 元素在任何元素之后有一个 non-margin-collapse-propagating 子元素，则该子元素必须补偿其前一个兄弟元素的边距。或者放入 CSS，即[class*="col-"] > * + .row margin-top: -20px; ，查看：jsfiddle.net/cq0qsx3q/2

我觉得您通过在其中一行周围添加一个额外的 div 使您的示例过于复杂 - 我评论了该 div 并且它仍然可以在不需要负上边距的情况下工作：jsfiddle.net/19Leuhsq/10跨度>

【参考方案3】：

是的，如果孩子使用float，则边距折叠不适用于该元素。

您可以定位浮动元素的第一个和最后一个子元素并重置它们的边距：

div.col-xs-6 div:first-child 
    margin-top: 0;


div.col-xs-6 div:last-child 
    margin-bottom: 0;

http://jsfiddle.net/19Leuhsq/4/

或者你根本不能使用边距折叠并在任何地方使用25px的填充而不是50px的边距，然后有一个容器将25px添加到顶部和底部：

.container 
    padding: 25px 0;


div:not([class]) 
    padding: 25px 0;

http://jsfiddle.net/19Leuhsq/7/

【讨论】：

只有在每个 <div class="row"> 中只有一行元素时才有效。当列开始换行到下一行时（这在 bootstrap v3 中完全没问题），事情就会中断：jsfiddle.net/19Leuhsq/5

据我了解，float 和 flexbox 都不支持边距折叠，所以它甚至值得，还是我错过了什么？

@TonyBogdanov 您可能对 flexbox 中的边距折叠是正确的，所以我从答案中删除了它。我添加了一个替代解决方案，不使用边距折叠。

折叠确实有魔力，填充并没有真正的帮助。尝试添加 N 个嵌套元素并观察它是否失败：jsfiddle.net/19Leuhsq/9