8

I know that BR is used to create line-breaks. I'm just wondering if it also creates space between lines? Please consider these example:

<p>
Hello <br/> Stackoverflow <br/><br/><br/> !
</p>

The output looks like:

Hello
Stackoverflow


!

By putting more and more BR I found distance between lines increase. Is it because of <br>? But when I try to control <br> height in CSS, it doesn't follow, it seems like it has no height at all, just a line-break. If <br> is not the cause of the space between line, then which is which and how to control it in CSS? Also, I usually use <br> to create large distance between lines, I do that to replace \n\r or the like when the data is from the database, is that okay?

kazinix
  • 28,987
  • 33
  • 107
  • 157

8 Answers8

6

The <br /> tag is for line breaks. You can use the CSS line-height property to control distance between lines, if you want to look at it that way.

Chad W
  • 420
  • 2
  • 14
5

for large distances between lines, is better to use <p> tags for every line, in which you can control the height.

http://jsfiddle.net/efortis/f6ju2/

Eric Fortis
  • 16,372
  • 6
  • 41
  • 62
  • `p` is a good option, please see my edit about newline. How am I going to use `p` when the text is from a database? – kazinix Aug 12 '11 at 03:42
2

The BR element forcibly breaks (ends) the current line of text...

More info here. and yes, adding more will increase the distance but I don't believe you can do much for styling it except applying clear.

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
2

The number of <br /> used does only create line breaks. If you are desiring to create large space between specific sections on the page I would use CSS margin attribute to distance one top section from the next. For example:

<div id="topSection" class="margin-bottom: 100px;">Hello Stackflow</div>
<div id="bottomSection">Content lower on the screen without unnecessary breaks.</div>
Nicholas Barger
  • 343
  • 3
  • 7
2

I found out that the space that we see when we put multiple BR is not actually caused by BR but the P element's line height.

Consider the following markup:

<p>
Hello <br/> Stackoverflow <br/><br/><br/> !
</p>

Output

1. Hello
2. Stackoverflow 
3. 
4.    
5.    !

Line 3 and 4 here are just empty lines. Despite being empty, they still posses line height.

kazinix
  • 28,987
  • 33
  • 107
  • 157
1

Yes, by putting more BR tags new line breaks will be created. It is not preferred to use BR tags to create large distances between lines, rather use CSS margin and padding to introduce spaces.

Aziz Shaikh
  • 16,245
  • 11
  • 62
  • 79
  • I also thinking of using margin and padding. Please see my edit about newline from the database. – kazinix Aug 12 '11 at 03:44
  • In that case, use a regular expression to replace `BR` with `P`. See working [demo here](http://jsfiddle.net/f6ju2/2/). – Aziz Shaikh Aug 12 '11 at 04:00
1

As an alternative to using <br /> to get the spacing you like in between lines, you can use the CSS line-height property

kaveman
  • 4,339
  • 25
  • 44
  • So you mean those spaces are not from `BR` but from default `line-height`? – kazinix Aug 12 '11 at 03:43
  • The spaces between `Stackoverflow` and `!` are due to the `
    ` tags you have added. When using the `line-height` CSS property, you can alter the spacing between lines (whether they are forcibly broken or not)     – kaveman Aug 12 '11 at 19:08
0

I found that line-height works well in CSS. :)

p {
  font-size:20px;
  line-height:280%;
}
<p>
Hello
<br>
World!
</p>
Daniel Barton
  • 40
  • 1
  • 6