Question

问题

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

当我考虑为网络编码时，我总是把它想象成一个漂亮的网格，在列或水平堆叠的元素之间有一个统一的水平沟槽，并且在元素之间再次有一个统一的垂直沟槽。

但实现这一目标的最佳方法是什么，最好是结合使用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的管理面板自动生成和构建标记。所以，我不能真正依赖于硬编码距离或太复杂的规则，如，如果这是或，如果那样，但没有孩子或是最后一个元素等等。

总结

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

我愿意接受任何建议。

Answer 1

是的，有一种称为FlexBox的不同呈现模式，它解决了所有这些问题（top-tier browsers only）。

Answer 2

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

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

Answer 3

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

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

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

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

或者您根本无法使用边距折叠并使用25px的填充而不是50px的边距，然后有一个容器将25px添加到顶部和底部：

.container {
    padding: 25px 0;
}

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