Margin on child element moves parent element

Question

I have a div (parent) that contains another div (child). Parent is the first element in body with no

Answer 1

The margin of the elements contained within .child are collapsing.

    
&

    

        
&
    
    

In this example, p is receiving a margin from the browser default styles. Browser default font-size is typically 16px. By having a margin-top of more than 16px on #child you start to notice it's position move.