How to change the height of a br

Question

I have a big paragraph of text that is divided into subparagraphs with  lt br gt  s    lt p gt    Blah blah blah     lt br  gt    Blah blah blah  Blah blah blah  Blah blah blah     lt br  gt    Blah blah blah   lt  p gt    I want to widen the gap between these subparagraphs  like there is two  lt br gt  s or something like that  I know that the right way to do this is to use  lt p gt  lt  p gt   but right now I cannot change this layout  so I am looking for CSS-only solution   I ve tried setting  lt br gt  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

User · Answer

lt br   gt  will take as much space as text-filled row of your  lt p gt   you can t change that  If you want larger  it means you want to separate into paragraph  so add other  lt p gt   Don t forget to be the most semantic you can

User · Answer

lt br gt  is for a line break    lt br   gt  is also for line break  the     optionally needed for void elements or for xhtml   Using  lt br gt  lt  br gt   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   lt div style  vilibility hidden  line-height 150    lt  div gt   or better still  a paragraph

User · Answer

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  lt br gt   So  thinking outside of the box  I have changed the vertical size by adjusting the font-size  in pt     lt font style  font-size  4pt  gt  lt br gt  lt  font gt

User · Answer

This did the trick for me when I couldn t get the style spacing to work from the span tag            lt p style  margin-bottom  5px   gt               lt span gt I Agree lt  span gt           lt  p gt           lt span gt I Don t Agree lt  span gt

User · Answer

So  peeps above have got basically a similar answer  but here it is very succinctly  Works in Opera  Chrome  Safari  amp  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

User · Answer

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

User · Answer

Answering on a more general level for anyone who landed here as they are fixing problems in spacing caused by the  lt br gt  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

User · Answer

br          content          margin  2em      display  block      margin-bottom  -20px        Works in Firefox  Chrome  amp  Safari  Haven t tested in Explorer   Windows-tablet is out of power    Line-breaks  font-size works differently in Firefox  amp  Safari

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · 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

User · Answer

Another way is to use an HR  But  and here s the cunning part  make it invisible   Thus    lt hr style  height 30pt  visibility hidden     gt    To make a cleaner BR break simulated using the HR  Btw works in all browsers      height 2px  visibility hidden  margin-bottom -1px

User · Answer

Here is the correct solution that actually has cross-browser support     br           line-height  150

User · Answer

Use  lt div gt    lt div gt Content 1 lt  div gt Content 2   This allows for a new line without any vertical space   This becomes   x000D   x000D   lt div gt Content 1 lt  div gt Content 2 x000D   x000D   x000D

User · Answer

What works for me is adding this inline between paragraph tags    not the best solution though    lt br style  line-height 32px  gt    -------- 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

User · Answer

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

User · Answer

UPDATED Sep  13  2019   I use  lt br class big gt  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  amp  Firefox  but not Edge  amp  IE   An alternative  simpler  way of adding a bit of extra vertical space after a  lt br gt  tag  if you don t mind editing the HTML  is with something like this  It works fine in all browsers    lt span style  vertical-align -37   gt   lt  span gt  lt br gt     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    xFEFF   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

User · Answer

lt span style  line-height 40px   gt  lt br gt  lt  span gt     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

User · Answer

Might found a solution very easy which you only need to create different type of   Seem to have worked for me   example     html code    lt br  class  150 space  gt     css code   br class  150 space        line-height  150

User · Answer

As far as I know  lt br gt  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

User · Answer

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

User · Answer

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

User · Answer

Instead of  lt br gt   lt br  gt   lt hr gt  or  lt span gt  lt  span gt  and trying different CSS properties to these tag   I did  I put paragraphs inside a div and gave it line-height 2px  html  lt div class  quot smallerlineHeight quot  gt      lt p gt Line1 lt  p gt      lt p gt Line2 lt  p gt   lt  div gt    css  smallerlineHeight       p           line-height  2px

User · Answer

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             lt div class  narrow  run at  server  gt  lt br gt  lt  br gt  lt  div gt

User · Answer

Interestingly  if the break tag is written in full-form as follows    lt br gt  lt  br gt    then the CSS line-height 145  works   If the break tag is written as    lt br gt  or   lt br  gt     then it doesn t work  at least in Chrome  IE and firefox   Weird

User · Answer

Michael and yoda are both right  What you can do is use the  lt p gt  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    lt p gt      A block of text   lt  p gt   lt p gt      Another block  lt  p gt    Another alternative is to use the block  lt hr gt  tag  with which you can explicitly define the height of the spacing

User · Answer

I just had this problem  and I got around it by using    lt div style  line-height 150    gt       lt br gt   lt  div gt

User · Answer

I know this is an old question however for me it worked by actually using an empty paragraph with margins   lt p class  quot  quot  style  quot margin  4px  quot  gt  lt  p gt   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

User · Answer

you can apply line-height on that  lt p gt  element  so lines become larger

User · Answer

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  lt  p   and  lt   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

User · Answer

May be using two br tags is the simplest solution that works with all browsers  But it is repetitive      lt p gt  content  lt  p gt   lt br   gt  lt br   gt   lt p gt  content  lt  p gt   lt br   gt  lt br   gt   lt p gt  content  lt  p gt

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

Examples related to html

Examples related to css