Why does div with content inside have automatic margin?
<p>I'd like to know why a <code>margin</code> appears to be present when there is content (paragraph, etc) in the <code>&lt;div&gt;</code>?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  width: 300px;
  height: 150px;
  background-color: #ccc;
}
.container2 {
  width: 300px;
  height: 150px;
  background-color: #000;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;p&gt;Text&lt;/p&gt;
&lt;/div&gt;

&lt;div class="container2"&gt;
  &lt;p&gt;Text&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>In the example above, there is a margin between the two <code>&lt;div&gt;</code>s, but if I take out the paragraph, the <code>margin</code> is gone.</p>

<p>Why is this happening?</p>