title: br line-height in safari and chrome leaving gap
body: <p>In my HTML I have a <code>&lt;div&gt;</code>, and inside the <code>&lt;div&gt;</code> I need different vertical spacing between lines of text.  I'm achieving this by using <code>&lt;br /&gt;</code> elements with a CSS class that corresponds to the amount of spacing I want.</p>
  
  <p>For instance, for a 5px gap, I use a <code>&lt;br&gt;</code> with the <code>height5</code> class:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;br /&gt;&lt;br class="height5" /&gt;
  </code></pre>
  
  <p>Similarly, <code>height2</code> and <code>height10</code> and whatever exist for the same purpose.</p>
  
  <p>The CSS classes are defined like so:</p>
  
  <pre class="lang-css prettyprint-override"><code>br.height2 {line-height:2px;}
  br.height5 {line-height:5px;}
  </code></pre>
  
  <p>This is working in IE6+, FF2+, and Opera but for some reason there are huge gaps in Safari and Chrome (as if those two browsers are ignoring it and just applying regular breaks).  I tried testing with larger line-heights like 20px or 30px and Safari and Chrome recognize those.  They seem to be ignoring anything under 5-10 pixels.  </p>
  
  <p>Help? Thanks!</p>