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

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?

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

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

Use <div>

<div>Content 1</div>Content 2

This allows for a new line without any vertical space.

This becomes

<div>Content 1</div>Content 2

Try using the CSS line-height atribute on your p tag that contains the br tag. Remember you can id your p tags if you want to isolate it, though it might be better using a div for isolation, IMO.

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

You don't seem to be able to adjust the height of a BR, but you can make it disappear reliably using display:none

Came across this page while searching for a solution to the following:

I have a situation where 3rd party payment gateway (Worldpay) only lets you customise their payment pages with 10k max of CSS and HTML (no script allowed) that get injected into the body of their template, and after a few BR's, FONT tags etc. Coupled with their DTD which forces IE7/8 into Quirks mode, this makes cross-browser customisation about as hard as it gets!

Turning off BR's makes things a lot more consistent...

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

May be using two br tags is the simplest solution that works with all browsers. But it is repetitive.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Answering on a more general level for anyone who landed here as they are fixing problems in spacing caused by the <br> tag. I have to do a lot of resets in order to get close to pixel perfect.

br {
    content: " ";
    display: block;
}

For the specific issue I was addressing I had to have a specific space between the lines. I added a margin to the top and bottom.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

And remember that (mis)using the <hr> tag as suggested somewhere, will end the <p> tag, so forget about that solution.
If f.ex. something is styled on the surrounding <p>, that style is gone for the rest of the content after the <hr> is inserted.

What works for me is adding this inline between paragraph tags... not the best solution though.

<br style="line-height:32px">

-------- Edit ---------

I ran into issues with PC/Mac with this... It gives the text the new line-height but does not do the line-break... You may want to do some tests yourself. Sorry!

<br /> will take as much space as text-filled row of your <p>, you can't change that. If you want larger, it means you want to separate into paragraph, so add other <p>. Don't forget to be the most semantic you can ;)

I had a thought that you might be able to use:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

But that didn't work on chrome or firefox.

Just thought I'd mention that in case it occurred to anyone else and I'd save them the trouble.

you can apply line-height on that <p> element, so lines become larger.

Instead of

<br>,<br/>,<hr> or <span></span> and trying different CSS properties to these tag.

I did, I put paragraphs inside a div and gave it line-height:2px

#html

<div class="smallerlineHeight">
   <p>Line1</p>
   <p>Line2</p>
</div>

#css

.smallerlineHeight {
    p {
        line-height: 2px;
    }
}

i Use these methods, but i dont know if cross-browser

================= Method 1 ==================

br {
    display:none;
}

OR

================= Method 2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

OR

================= Method 3 ==================

br:after { content: "" }
br { content: "" }

Interestingly, if the break tag is written in full-form as follows:

<br></br>

then the CSS line-height:145% works. If the break tag is written as:

<br> or 
<br/> 

then it doesn't work, at least in Chrome, IE and firefox. Weird!

Here is a solution that works in IE, Firefox, and Chrome. The idea is to increase the font size of the br element from the body size of 14px to 18px, and lower the element by 4px so the extra size is below the text line. The result is 4px of extra whitespace below the br.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

Sorry if someone else already said this, but the simple solution is to toy around with your "line-height". If you are getting too much space when you use a line break, it's simply because you have your line height set too high. You can correct this in CSS (but know it will affect everything that uses that property) or you can do an inline style to override the CSS.

I had to develop a solution to convert HTML to PDF, and vertically center the text in table cells, but nothing worked except inputting the plain <br>

So, thinking outside of the box, I have changed the vertical size by adjusting the font-size (in pt).

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

You'd have to do this inline and on each
element but it should work on most browsers Fiddle with the line height to get the desired effect. If you make it inline on each element, it should work across most browsers and e-mail(but this is too complex to discuss here).

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

  br {
        line-height: 150%;
     }

This did the trick for me when I couldn't get the style spacing to work from the span tag:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

Might found a solution very easy which you only need to create different type of
. Seem to have worked for me.

example : (html code)

<br/ class="150%space">

(css code)

br[class='150%space']
{
   line-height: 150%;
}

you could also use the "block-quote" property in CSS. That would make it so it doesn't effect your individual lines but allows you to set parameters for just the breaks between paragraphs or "block quotes".

UPDATE:
I stand corrected. "blockquote" is actually a html property. You use it just like < p > and < /p > around your work. You could then set the parameters for your block quote in css like

blockquote { margin-top: 20px }

Hope this helps. It is similar to setting the parameters on the br and may or may not be cross browser compatible.

UPDATED Sep. 13, 2019:

I use <br class=big> to make an oversized line break, when I need one. Until today, I styled it like this:

br.big {line-height:190%;vertical-align:top}

(The vertical-align:top was only needed for IE and Edge.)

That worked in all the major browsers that I tried: Chrome, Firefox, Opera, Brave, PaleMoon, Edge, and IE11.

However, it recently stopped working in Chrome-based browsers: my "big" line breaks turned into normal-sized line breaks.

(I don't know exactly when they broke it. As of Sep 12, 2019 it still works in my out-of-date Chromium Portable 55.0.2883.11, but it's broken in Opera 63.0.3368.71 and Chrome 76.0.3809.132 (both Windows and Android).)

After some trial and error, I ended up with the following substitute, which works in the current versions of all those browsers:

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

Notes:

line-height:190% works in everything except recent versions of Chrome-based browsers.

vertical-align:top is needed for IE and Edge (in combination with line-height:190%), to get the extra space to come after the preceding line, where it belongs, rather than partially before and partially after.

display:block;content:"";margin-top:0.5em works in Chrome, Opera & Firefox, but not Edge & IE.

An alternative (simpler) way of adding a bit of extra vertical space after a <br> tag, if you don't mind editing the HTML, is with something like this. It works fine in all browsers:

<span style="vertical-align:-37%"> </span><br>

(You can, of course, adjust the "-37%" as needed, for a larger or smaller gap.) Here's a demo page which includes some other variations on the theme:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



May 28, 2020:

I've updated the demo page; it now demonstrates all of the above techniques:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

How about just adding a paragraph instead of the line break like so

bla la la bla bla abla la la bla bla abla la la bla bla a

Then you can specify the lineheight or padding or whatever for that p

I know this is an old question however for me it worked by actually using an empty paragraph with margins:

<p class="" style="margin: 4px;"></p>

Increasing or decreasing the margin size will increase or decrease the distance between elements just like a border would do but adjustable.

On top of that, it is browser compatible.

As far as I know <br> does not have a height, it merely forces a line break. What you have is a text with some line breaks in addition to the auto-wrap ones, not subparagraphs. You can change the line spacing, but that will affect all lines.

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Works in Firefox, Chrome & Safari. Haven't tested in Explorer. (Windows-tablet is out of power.)

Line-breaks, font-size works differently in Firefox & Safari.

I got it to work in IE7 by using a combo of solutions, but mainly wrapping the Br in DIV as Nigel and others suggested. Added Id and run at="server" so I could remove the BR when removing checkbox from row of checkboxes.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

Michael and yoda are both right. What you can do is use the <p> tag, which, being a block tag, uses a bottom-margin to offset the following block, so you can do something similar to this to get bigger spacing:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

Another alternative is to use the block <hr> tag, with which you can explicitly define the height of the spacing.

I haven't tried the :before/:after CSS2 pseudo-element before, mainly because it's only supported in IE8 (this concerning IE browsers). This could be the only possible CSS solution:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Here is an example on QuirksMode.

<br> is for a line break.
<br /> is also for line break, the "/" optionally needed for void elements or for xhtml.
Using <br></br>, browsers will insert two line breaks for both are "virtually" the same.
There is no way to increase the size of a line break because it's just a line break.
Use a div with vilibility set to hidden (<div style="vilibility:hidden; line-height:150%;"</div>) or better still, a paragraph.