br line-height in safari and chrome leaving gap

Answer 1

This worked for me for both firefox and chrome. Got the idea from @SamuelC and @anushr.

br{ 
    display: block;
    line-height: 0.1; 
    content: " ";
}

Answer 2

Those browsers might be reading your white space (carriage return, etc) and propping it open with a  sort of value. I suggest using multiple div tags and style the divs with margin-bottom attributes of the space you want.

<div style="margin-bottom: 2px">content</div>
<div style="margin-bottom: 5px">content</div>
<div>content</div>

Answer 3

Try this:

br { line-height: 1em; }

or:

br { margin-top: 2em; }

Answer 4

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

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

Answer 5

I know this is old, but my answer here is cross-browser without turning br into a block

/* line height can be set to whatever you want*/
br {line-height: 0.1; content: " "}