如何修复折叠顶部和底部边距？

Question

我是CSS的新手，我正在尝试了解如何修复以下行，而不是处理顶部和底部边距。但它适用于边缘边缘，但是：

.contents {
    ...
    margin: 10px 10px 10px 10px;
}

示例：http://jsfiddle.net/LCTeU/

我该如何解决这个问题？

编辑：

我也试过填充容器，而只是将容器扩展到最大尺寸（为什么？）：

.container {
    ...
    padding: 10px 10px 10px 10px;
}

Answer 1

对崩溃涉及的任何元素使用overflow:auto。例如：

article {
    overflow:auto;
}

<强> jsFiddle example

Answer 2

这个答案是基于你提供的小提琴。

我认为您的方法不正确，因为您在article内应用了一个保证金，以便在父div标记内对其进行隔离。在这种情况下，最好使用填充，因为您尝试将内容与其外边框分开。所以申请：

article {
  //display: block;
  clear: both;
  padding: 10px;
}

这会导致article标记的大小增加，但容器div元素的边框现在将会触及。要在元素之间创建空格，请应用margin。

.rounded-box {
  background-color: #959392;
  border-radius: 15px;
  margin: 10px 0px;
}

工作示例 http://jsfiddle.net/LCTeU/4/

所以回顾一下，当你想在两个元素之间创建空间时，使用margin。如果要在元素及其边框之间创建空间（或者希望元素被空格包围），请使用padding。

Answer 3

我找到了一个不需要填充的修复程序，并且不需要更改容器元素的overflow：

article:after {
    content: "";
    display: block;
    overflow: auto;
}

我们的想法是在底部添加另一个元素，这会破坏折叠边距，而不会影响高度或填充。

Answer 4

根据Erik Rothoff建议的修复方法（似乎在Safari中不起作用），首先我尝试了以下方法：

article:after {
    content: "";
    display: inline-block;
    overflow: auto;
}

此可以在Safari中工作，但是却占用了我无法摆脱的空间，这使网格变得混乱，以至于我需要更改边距。

然后我决定通过执行以下操作将两者结合：

article:after {
    content: "";
    display: block;
    padding-top: 1px;
    margin-top: -1px;
}

此功能可在Safari中使用，可接受的高度为1px，由负边距顶部否定。