title: Empty block elements (ex: <div>s) are rendered differently in Chrome and Firefox; when does it happen and who is right?
body: <p><a href="http://koper.wowpanda.net/test3.html" rel="noreferrer">This page</a> renders differently in Firefox and Chrome.</p>
  
  <h2>Code</h2>
  
  <pre><code>&lt;p style="border: solid 1px red"&gt;Test test&lt;/p&gt;
  &lt;p style="border: solid 1px red"&gt;Test test&lt;/p&gt;
  &lt;p style="border: solid 1px red"&gt;Test test&lt;/p&gt;
  &lt;div style="margin-bottom: 1em; overflow: auto;"&gt;&lt;/div&gt;
  &lt;p style="border: solid 1px red"&gt;Test test&lt;/p&gt;
  &lt;p style="border: solid 1px red"&gt;Test test&lt;/p&gt;
  
  &lt;p style="border: solid 1px red"&gt;Test test&lt;/p&gt;
  </code></pre>
  
  <h2>Firefox, Opera, Internet Explorer</h2>
  
  <p><a href="http://koper.wowpanda.net/firefoxr.PNG" rel="noreferrer">alt text http://koper.wowpanda.net/firefoxr.PNG</a></p>
  
  <h2>Chrome</h2>
  
  <p><a href="http://koper.wowpanda.net/chromer.PNG" rel="noreferrer">alt text http://koper.wowpanda.net/chromer.PNG</a></p>
  
  <h2>Questions</h2>
  
  <ol>
  <li>Who is right? Firefox or Chrome?</li>
  <li>When does it happen exactly? For example if I add <code>padding: 1px</code> then suddenly Chrome will add the bottom margin too. Same thing if I add something (anything) in the div contents.</li>
  <li>Is there any CSS/Javascript hack to make both browsers display it the same without modifying the HTML?</li>
  </ol>