How to change the height of a <br>?

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.

---

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

---

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

  br {
        line-height: 150%;
     }

---

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

---

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

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

---

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.

---

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

---

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.

---

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!

---

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

---

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 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.

---

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.

---

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

---

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!

---

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.

---

Using some HTML in markdown, having to force <br>s in a list that resulted too cramped, none of the given solutions worked as desired (at least in my setup)

ended up with

<div style="height:10px;font-size:10px;">&nbsp;</div>

I've found it here, extremely close to dorogz suggestion. Of course for standard needs CSS is better

---

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.

---

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...

---

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>

---

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.

---

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.

---

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: "" }

---

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.

---

<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).

---

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>

---

Use <div>

<div>Content 1</div>Content 2

This allows for a new line without any vertical space.

This becomes

Content 2

---

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

---

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>

---