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

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例子