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

Question

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

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

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

我该如何解决这个问题？

编辑：

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

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

Answer 1

根据 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，被负边距顶部否定。

Answer 2

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

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

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

Answer 3

此答案基于您提供的小提琴。

我认为您的方法是不正确的，因为您对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 4

在与折叠有关的任何元素上使用overflow:auto。例如：

article {
    overflow:auto;
}

jsFiddle example