css - 如何修复顶部和底部边距折叠的问题？

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