Margin goes outside div when border is removed

Question

Derived from an actual problem with borders and margin on my site I have made this test example which I think acts a little strange:

Answer 1

The margin on the outer2 element is calculated from the bottom of the element above it with no top margin applied to the outer2 element. If you add border, however, it is calculated from the bottom of the border.

Also, when bottom and top margins are applied to elements that follow each other, they collapse, that is just the way the box model works.

If you want to control the offset of an element inside another element, use padding.