title: Child elements with margins within DIVs
body: <p>I need two consecutive <code>div</code> elements (with backgrounds) to be touching seamlessly, one below the other. However, this layout breaks when I put a child <code>p</code> element into the bottom <code>div</code>. The margins of the <code>p</code> element force a blank gap between both <code>div</code> elements. This is strange behavior, as I am expecting the margin of the <code>p</code> to stay within the content and background area of the <code>div</code>. It renders the same way on Firefox, Chrome and IE 8.</p>
  
  <pre><code>&lt;div style="background: #ccccff"&gt;Top Div&lt;/div&gt;
  &lt;div style="background: #ffcccc"&gt;&lt;p&gt;Bottom Div&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here's what it looks like.</p>
  
  <p><img src="https://i.stack.imgur.com/lYES4.png" alt="Image showing the top div (in blue), then a white gap, then the bottom div (in pink). The white gap should not be present."></p>
  
  <p>I could fix this by changing the margins to paddings for the <code>p</code> element, but then I would also have to do this with header elements, list elements, and any other element I want to use at the start of a <code>div</code>. That is not desirable.</p>
  
  <p>Could someone enlighten me: what caveat of the box model am I missing? Is there an easy way to fix this, preferably by modifying the style of the <code>div</code>?</p>