How to change the height of a <br>? – Dev

The best answers to the question “How to change the height of a <br>?” in the category Dev.

QUESTION:

I have a big paragraph of text that is divided into subparagraphs with <br>‘s:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

I want to widen the gap between these subparagraphs, like there is two <br>‘s or something like that. I know that the right way to do this is to use <p></p>, but right now I cannot change this layout, so I am looking for CSS-only solution.

I’ve tried setting <br>‘s line-height and height with display: block, I also Googled and Stack Overflow-ed briefly, but did not find any solution. Is this even possible without changing the layout?

ANSWER:

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

  br {
        line-height: 150%;
     }

ANSWER:

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.

ANSWER:

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; }

ANSWER:

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 */
}