br line-height in safari and chrome leaving gap
Solution 1
This worked on Chrome (the content
attribute did the trick):
br {
content: " ";
display: block;
margin: 1em;
}
Solution 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>
Solution 3
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: " "}
Solution 4
Try this:
br { line-height: 1em; }
or:
br { margin-top: 2em; }
Solution 5
This worked for me for both firefox and chrome. Got the idea from @SamuelC and @anushr.
br{
display: block;
line-height: 0.1;
content: " ";
}
Admin
Updated on July 28, 2022Comments
-
Admin almost 2 years
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 theheight5
class:<br /><br class="height5" />
Similarly,
height2
andheight10
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!
-
Sergei Kovalenko almost 15 yearsyes, <br /> 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.
-
Vael Victus over 9 yearsThanks for this. Styling the br was necessary because a rich-text editor I use would leave large gaps between texts.