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

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?

Hymettus

Your formatting may add to the confusion to think br tags had a height value. As pointed out below, they are simply line breaks. Have you tried doing anything similar in your word processor? – Chartreuse

Changing height of <br> is semantically wrong. <br> means you just put another line to your text and single paragraph should have fixed line height. If some text is separated, it should be a separate paragraph. – Slapjack

I've written a thorough response to a similar question here. – Infra

If you can, it's probably best to change this to a <p> tag which contains three <div> tags. That way you can adjust the spacing using css. – Perihelion

@JohnHenckel A bit misleading since <p> tags cannot contain <div> tags see this post – Cornetcy

Sometimes the code we've been given to format is not something we have control over. It is in these times that you start saying to yourself "I can't add <p> tags... maybe if I'll just alter the height of the <br>'s that are being used as spacers instead. – Graehme

Answer 1

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.

Oshiro

This does NOT work in : IE7, Opera10, Chrome2. In Firefox, it creates the margin double-size. You need to specify margin-top: 10px; – Quiteri

Neither do I think it should be styleable. Maybe it is a bug in Gecko? – Plasmo

Add a content:" " attribute to that style and it works fine in Chrome – Tate

This solution works in Firefox. For webkit-based browsers you can add line-height. In the end it's something like br { display:block; margin-top:10px; line-height:22px; }. – Paulpaula

@awe: A better solution would be margin:10px 0 0, to those who don't want it double-sized. – Medicable

This is VERY hacky, but replacing a blank space in each line with <span style="font-size:160%">&nbsp;</span> did work to "widen the gap between these subparagraphs" – Squamous

When I add content:" " to the br it is just not displayed anymore at all. – Mills

Doesn't work for me... I also tried @awe's code margin-top: 10px;, still didn't work.... – Whereby

I can verify this has 0 support for mobile devices and using line brakes for anything more than brakes in text on a page is poor form. – Vanlandingham

Fails in Netscape :( – Eudy

This worked me very well. <code >/* To Avoid Space @ Top of News Content */ br { display: contents; }code </code > – Abscind

Answer 2

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

Bergren

This. This is correct, relative to the question as stated. And it's also the only answer on the page that actually did what I needed it to do. – Pansie

None of the other answers worked for me until I modified the content. This is the correct answer, IMO. – Safe

This was the only think that works for me ! – Flaring

agree, that's the first one I tried that works – Contentment

Not working on Safari – Pizza

Answer 3

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

  br {
        line-height: 150%;
     }

Oosphere

Not IE7 as far as I can tell. – Selection

This works for increasing the height of a line break, but not decreasing it. – Isleen

@Oosphere When you have no chance to change the HTML but only the CSS, this works great. Thank you! This should be upvoteed and regarded as the correct answer. I think. – Swartz

@Pluto: nigel's answer below works for me to decrease the height! – Phelgon

This works great in Chrome 66.0.3359.181 and Firefox Quantum 60.0.2, but it's not quite right in Edge 42.17134.1.0 and IE 11.48.17134.0. To avoid shifting the line which ends in the BR down from its proper position, in Edge and IE, add a vertical-align:top style, like this: br {line-height:150%;vertical-align:top;} – Astatine

Unfortunately, no longer working in Chrome v.76. For Edge and IE you need to also add vertical-align:top. I posted a solution here: https://mcmap.net/q/92765/-how-to-change-the-height-of-a-lt-br-gt-duplicate – Astatine

As of November 27, 2021 does NOT work in current Firefox. Accepted answer still does work however. – Marathon

Answer 4

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

Fulsome

I had to add margin:0px for IE8 – Intercalary

That is horrendous abuse of HTML tags, better to use a <p></p> with margins then destroy an <hr /> – Prowess

This trick is good, but to get result more accurate, you have to use margin: 0 and border: 0. – Transport

Answer 5

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

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

Philippi

This works great and also gets around the limitation of @htmldrum's answer – Phelgon

I like this too, used it for a thin break e.g. 25%. If the new div block causes wrong/irregular spacing use span instead of div. – Oculus

Works perfectly for me as well – Silvanasilvano

Works perfectly in Firefox for both greater and less than 100%. – Fingerstall

Answer 6

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.

Reunite

It seems that there is really no way. I've even tried playing with :before and :after properties, but... :( – Hymettus

I know this is super old, but @Isaac Minogue has a valid way of doing this. Modifying the content property does the trick. – Safe

Answer 7

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

Second

Yeah, sure, but that is not what I want. – Hymettus

In what way would that differ from what you want? It will increase the space between the lines. – Chartreuse

I have a little more than nine blah's in my text. Imagine several kilobytes of text, divided into three blocks with three <br>'s. – Hymettus

If you apply the line-height to the <br> tag, then the forced line breaks will be bigger than the wrapped line breaks... – Fission

Sounds more like you want three paragraphs rather than using <br/> – Jaqitsch

Answer 8

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.

Marietta

thank you. you pushed me into the right direction. to paragraphs, negative margin... this solved my problem. – Bussell

Answer 9

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!

Archiphoneme

Answer 10

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

Astatine

<span style="vertical-align:-37%"> works for me. Excellent – Convoke

Answer 11

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.

Ledford

Yeah, I had high hopes for :before { content }; too, but it failed me. – Hymettus

Inject it somewhere, it should work. Alas, it doesn't work in IE6/7. – Intemperance

Answer 12

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.

Standard

Could you be more specific about which part of your css solved the problem? This will help others understand the answer. – Havens

Work pretty well for me, thank! But is lacking some kind of information. – Shakespeare

Answer 13

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.

Handoff

Answer 14

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.

Disprize

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post. – Twill

Not a critique and not a request. Just trying to say what will happen if you put an hr tag inside a p tag as suggested. And as a newcomer I haven't got enough reputation to comment on the relevant post. So please advice how else I should make such comment (which IMHO is highly relevant with regards to the question). – Disprize

Answer 15

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

Kirkendall

Just using vertical-align seems to do the trick with the br tag. I tested this on IE 11. – Highspeed

Answer 16

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!

Westsouthwest

worked for me to manage vertical size at pixel level inside a UIWebView on ios . – Chloric

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! – Westsouthwest

Answer 17

I use these methods, but i don't know if cross-browser

Method 1

br {
    display:none;
}

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

Method 3

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

Coel

upvote for display:none. that's what I ended up doing! – Graehme

It’s nice that you can make <br/> disappear, but how does it answer the question? – Supramolecular

none of these worked for me! This is not a suitable answer to the above question. – Bussell

Answer 18

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

Kiyohara

Answer 19

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.

Ledford

Thank you for your answer, but I've stated that I cannot change this layout right now. Of course, I will change it to something saner when it will be possible, but right now -- sorry. – Hymettus

Answer 20

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

Quarterdeck

Answer 21

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

Blaubok

Answer 22

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>

Beautician

Answer 23

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

Totter

Answer 24

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.

Corral

Answer 25

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.

Ride

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post. - From Review – Anchoress

I disagree. The OPs question was how to ajust the height of a line break. You can't, so you adjust the line-height to achieve the desired effect. – Ride

Answer 26

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.

Koal

This is the first time I ever heard of this property. Can you explain this in more detail, please? – Hymettus

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 } etc etc etc – Koal

Answer 27

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

Graphitize

So why post this if you're not going to give examples? The whole idea of the site is that you do discuss it. – Delia

Answer 28

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>

Spode

Answer 29

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

Brutality

Answer 30

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>

Abeyance

Answer 31

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>

Biweekly

Answer 32

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

Siegel

Answer 33

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

Newsman

CSS naming convention should never being with a number – Disentail

Answer 34

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 <p></p>
bla la la bla bla abla la la bla bla abla la la bla bla a <p></p>
bla la la bla bla abla la la bla bla abla la la bla bla a <p></p>

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

Inelegant

Yes, I defined the "big" class for both <br> and <p>. "<br class=big>" adds space between lines, and "<p class=big>" adds space before a paragraph: ‍‍‍‍‍‍ ‍‍ br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;} ‍‍‍‍‍‍ ‍‍ p.big {margin-top:1.5em} ‍‍‍‍‍‍ ‍‍ But a problem with the <p> tag is that it is styled inconsistently by email programs. When email text containing paragraph breaks is "quoted" in email replies, spacing between paragraphs often changes drastically. So I'm in the habit of using doubled line breaks (ctrl-enter in gmail), in emails. – Astatine