html - How to change the height of a <br>?

ID : 10115

viewed : 4

Tags : htmlcsshtml

Top 5 Answer for html - How to change the height of a <br>?

vote vote

93

Css:

br {    display: block;    margin: 10px 0; } 

The solution is probably not cross-browser compatible, but it's something at least. Also consider setting line-height:

line-height:22px; 

For Google Chrome, consider setting content:

content: " "; 

Other than that, I think you're stuck with a JavaScript solution.

vote vote

81

Here is the correct solution that actually has cross-browser support:

  br {         line-height: 150%;      } 
vote vote

79

So, peeps above have got basically a similar answer, but here it is very succinctly. Works in Opera, Chrome, Safari & Firefox, most likely IE too?

br {             display: block; /* makes it have a width */             content: ""; /* clears default height */             margin-top: 0; /* change this to whatever height you want it */ } 
vote vote

65

Another way is to use an HR. But, and here's the cunning part, make it invisible.

Thus:

<hr style="height:30pt; visibility:hidden;" /> 

To make a cleaner BR break simulated using the HR: Btw works in all browsers!!

{ height:2px; visibility:hidden; margin-bottom:-1px; } 
vote vote

54

I just had this problem, and I got around it by using

<div style="line-height:150%;">     <br> </div> 

Top 3 video Explaining html - How to change the height of a <br>?

Related QUESTION?