CSS margin terror; Margin adds space outside parent element

Add overflow:auto to your #page div.

jsFiddle example

And check out collapsing margins while you're at it.

Add any one of the following rules:

float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;

This is caused by collapsing margins. See an article about this behavior here.

According to the article:

The W3C specification defines collapsing margins as follows:

“In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.”

This is also true for parent-child elements.

All the answers include one of the possible solutions:

There are other situations where elements do not have their margins collapsed:

• floated elements
• absolutely positioned elements
• inline-block elements
• elements with overflow set to anything other than visible (They do not collapse margins with their children.)
• cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
• the root element