CSS - styling BR line height

Associate
Joined
6 Jan 2006
Posts
1,024
Location
Midlands
Hi,

I would like to style br line spacing to be like p.

I have tried padding, margin, line-height. Nothing makes a difference to the spacing in IE, although padding works in firefox.

any ideas?
 
From some tests I've just done, a <br /> in a <p> inherits the <p>'s line-height in IE [7, at least].

Same for <blockquote>, and - I'm assuming, because I don't fancy testing them all at the moment - any other block-level text element.

A <br /> shouldn't really be placed anywhere other than inside a block-level text element, so setting the containing element's line-height should solve any semantic line-break problems.

If that doesn't solve it, post a snippet of example markup so we can diagnose in more depth :)
 
Last edited:
Basically i want the line height of the BR to be the same as a starting P.

<p>
text
</p>
<p>
Some text
<br/>
more text
</p>
<br/>
even more text

I want the line height for each line of text to be the same. I just can not seem to style the BR tag!
 
What you're doing really makes no sense to me. Why would you want a line break to look identical to paragraph spacing? If you need the spacing a new paragraph brings, surely it IS a new paragraph in which case you'd just use a new set of p tags.

Regardless, line-height does in fact work on br elements.
With IE6 and FF, I see exactly 50px of spacing between the blue bars on the following page.
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/line-height-support-br-elements.html
 
Back
Top Bottom