How to Fix Collapsing Top and Bottom Margins?

Question

I'm new to CSS and I'm trying to understand how to fix the following line from not working for top and bottom margins. It works for side margins just fine, however:

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

Example: http://jsfiddle.net/LCTeU/

How do I fix this?

Edit:

I've also tried padding the container instead, and that just expands the container to maximum size (why?):

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

Answer 1

Use overflow:auto on any of the elements that are involved with the collapse. For example:

article {
    overflow:auto;
}

jsFiddle example