br line-height in safari and chrome leaving gap

css, google-chrome, html, safari

Solution

This worked on Chrome (the `content` attribute did the trick):

br {
  content: " ";
  display: block;
  margin: 1em;
}

Problem

In my HTML I have a `<div>`, and inside the `<div>` I need different vertical spacing between lines of text. I'm achieving this by using `<br />` elements with a CSS class that corresponds to the amount of spacing I want. For instance, for a 5px gap, I use a `<br>` with the `height5` class: ``` <br /><br class="height5" /> ``` Similarly, `height2` and `height10` and whatever exist for the same purpose. The CSS classes are defined like so: ``` br.height2 {line-height:2px;} br.height5 {line-height:5px;} ``` 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. Help? Thanks!

Original source