CODEWITHSUNDEEP
html
kazinix
kazinix

Reputation: 30103

Does BR tag posseses height?

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?

Upvotes: 8

Views: 7922

Answers (8)

Daniel
Daniel

Reputation: 40

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

p {
  font-size:20px;
  line-height:280%;
}
<p>
Hello
<br>
World!
</p>

Upvotes: 0

kazinix
kazinix

Reputation: 30103

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.

Upvotes: 2

Nicholas Barger
Nicholas Barger

Reputation: 363

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>

Upvotes: 2

Eric Fortis
Eric Fortis

Reputation: 17350

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/

Upvotes: 5

thekaveman
thekaveman

Reputation: 4399

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

Upvotes: 1

Aziz Shaikh
Aziz Shaikh

Reputation: 16524

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.

Upvotes: 1

Chad W
Chad W

Reputation: 420

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.

Upvotes: 6

Joseph Marikle
Joseph Marikle

Reputation: 78520

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.

Upvotes: 2

Related Questions