br line-height in safari and chrome leaving gap

Question

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!

score 17 · Answer 1 · answered Feb 14 '12 at 10:25

17

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

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

answered Feb 14 '12 at 10:25

anushr

3,342
3
29
50

Thanks for this. Styling the br was necessary because a rich-text editor I use would leave large gaps between texts. – Vael Victus Jan 12 '15 at 18:31

score 3 · Answer 2 · answered Jun 09 '09 at 01:42

3

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>

answered Jun 09 '09 at 01:42

Jeremy Sullivan

995
1
14
25

1

yes,
is almost like goto :) Some smart browsers can ignore font-sizes smaller than 9px to prevent users' eyes damage. And spaces between elements must be discribed in CSS as spaces, not as text line-brakes. – Sergei Kovalenko Jun 09 '09 at 08:30

score 1 · Answer 3 · edited Feb 03 '14 at 13:36

1

Try this:

br { line-height: 1em; }

or:

br { margin-top: 2em; }

edited Feb 03 '14 at 13:36

micnic

10,915
5
44
55

answered Feb 03 '14 at 13:16

user2881770

45
1
9

score 1 · Answer 4 · answered Sep 17 '15 at 21:01

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: " ";
}

answered Sep 17 '15 at 21:01

Priyanka NM

11
2

score 1 · Answer 5 · answered Mar 19 '12 at 22:48

1

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: " "}

answered Mar 19 '12 at 22:48

SamuelC

219
1
3
13

br line-height in safari and chrome leaving gap

5 Answers5

Linked