Child elements with margins within DIVs

Question

I need two consecutive div elements (with backgrounds) to be touching seamlessly, one below the other. However, this layout breaks when I put a child p

Answer 1

Setting a positive padding, and a corresponding negative margin on the div element seems to fix the issue, though I know not why.

Top Div
Bottom Div