WEB上的垂直间距？

Question

问题

我一直想知道是否有某种标准、规范或 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 随后，但没有子元素或是最后一个元素 等等

---

总结

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

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

Answer 1

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

Answer 2

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

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

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

Answer 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/