css margins issue

Question

I am building a page using blocks of sections: http://jsfiddle.net/NrkTn/3/

You can see I have added margin to the section elements, however I'm unable to add both top and bottom margins, it uses whichever is the largest value.

Each section should have a top and bottom margin of 20px, making the space between them 40px, however it is showing a margin of only 20px.

Answer 1

Margins collaspe on themselves, so that is expected behavior. You could do what you want by changing your section CSS to use borders instead

#page section{ border-top: 20px solid white; border-bottom: 20px solid white; }

http://jsfiddle.net/SAcK8/

Another way to do what you want is to wrap your sections in divs and use padding

Answer 2

That is expected behavior. It will always take the largest margin and not a combination of the two. Here's an article that explains this.

Answer 3

Margins collapse on themselves: http://jsfiddle.net/NrkTn/4/