BR Spacing - Line Height

Hi,

I am having problems styling my <br/> tag. I would like the line height to be the same as a new paragraph.

<p>
Line One
<br/>
Line Two
</p>
Line Three
<br/>
Line Four

I want each line to have the same line spacing. Is this possible?

Thanks.

Hi, welcome to Sitepoint :slight_smile:

First question that needs to be answered is “Why are you using breaks?”

If each of those is a new line (essentially a new paragraph) then you should be using p elements and not breaks.


<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>

Then you can just set the margin on the p elements.


p {margin:0 0 1em 0}

(If it’s a list of things then you should be using a list anyway).

You should never use breaks to make space but they would be used in something like a poem or an address (or forms) to break each line. Other than that there is rarely a need to use breaks as other elements are more semantic and fit the bill much better.

Setting the height of a break is quite awkward and best avoided. You would need to control font-size, line-height margins and height.

If you have an example of the code you used in situ then we can make a better suggestion :slight_smile:

Assuming they are <p>'s they have approximately 1em worth of spacing.
I’d set the line-height and height to 0 and then put a bottom margin on each.

Hi Paul,

Thanks for replying and I understand your point, however the html is user generated.

I have an html editor on my website and i need to style what the user has inputted. Some users like to use BR instead of P, therefore i need to style BR to look like P.

Is there no way to style BR then?

Ive just tried it and it is not working.

Text 1
<br/>
Text 2

I just need to know how to increase the spacing between Text 1 and Text 2. Setting Line-Height to BR do not work.

Then just set a height. Set a margin/padding. All 3 of them do not work??

Nope. Margin only works in Firefox and not IE7.

Only Firefox allows you to add a margin to the break. All other browsers (opera, Safari and IE) ignore it.

You can’t really do anything consistent I’m afraid. You would have to trap your users input and turn the breaks into paragraphs.

Historically breaks just apply a newline without adding any extra space and therefore some browsers don’t allow them to be styled.

So what i am having to achieve is impossible to work for all browsers?

Yes I think that is what Paul is saying :(.

So what i am having to achieve is impossible to work for all browsers?

As far as I know (and as far as tests indicate) then it doesn’t seem possible I’m afraid. The br was never meant to be styled but just create a new line in the text.

Thanks for help.
Is there any other tag i can replace it which will allow me to style it? I can do find and replace.

I suppose the most foolproof method would be to replace the breaks with a classed span as follows.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.break{
    display:block;
    margin:0 0 1em;
}
</style>
</head>
<body>
<p> Line1
<span class="break"></span>
Line2
<span class="break"></span>
Line3
<span class="break"></span>
Line4
<span class="break"></span>
Line5
<span class="break"></span>
Line6
<span class="break"></span>
</p>
</body>
</html>


Thank you for your time Paul. You have been great help.