Question

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?

Answer 1

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.