107

I have seen a question here about the same, but I can't get any of the answers to work (at least on Chrome).

This question is only for <br>, I know plenty of other techniques to change the height but in this case I can't change the HTML.

bla<BR><BR>bla<BR>bla<BR><BR>bla

CSS:

br {
  display: block;
  margin-bottom: 2px;
  font-size:2px;
  line-height: 2px;
}

Desired effect: smaller inter-line height.

The only thing I can get to work is display:none, but then all line break are removed.

Here's a fiddle for it using some of the techniques, but see that it renders the exact same as without any CSS.

2

12 Answers 12

103

This feels very hacky, but in chrome 41 on ubuntu I can make a <br> slightly stylable:

br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
}

I control the spacing with the font size.


Update

I made some test cases to see how the response changes as browsers update.

*{outline: 1px solid hotpink;}
div {
  display: inline-block;
  width: 10rem;
  margin-top: 0;
  vertical-align: top;
}

h2 {
  display: block;
  height: 3rem;
  margin-top:0;
}

.old br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
  outline: red;
}

.just-font br {
  content: "";
  display: block;
  font-size: 200%;
}
.just-margin br {
  content: "";
  display: block;
  margin: 2em;
}

.brbr br {
  content: "";
  display: block;
  font-size: 100%;
  height: 1em;
  outline: red;
  display: block;
}
<div class="raw">
  <h2>Raw <code>br</code>rrrrs</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
  
<div class="old">
  <h2>margin & font size</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
  
<div class="just-font">
  <h2>only font size</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>

 <div class="just-margin">
  <h2>only margin</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
   
<div class="brbr">
  <h2><code>br</code>others vs only <code>br</code>s</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>

They all have their own version of strange behaviour. Other than the browser default, only the last one respects the difference between one and two brs.

7
  • 1
    Wow, this is the only solution that works for making lines shorter.
    – B Seven
    Commented Jul 28, 2016 at 18:26
  • 1
    Best solution if you can't control the HTML you are getting
    – Anthony
    Commented Sep 13, 2016 at 16:51
  • 1
    In 2017, this worked for me: content: ""; margin: 0 Commented Jan 23, 2017 at 15:01
  • 1
    I used it first time in my 15 years of career. It works and thanks dear :)
    – Kamlesh
    Commented Oct 15, 2019 at 13:32
  • You shouldn't need the font-size, just playing with the margin will be enough I think.
    – Déjà vu
    Commented Jun 24, 2020 at 14:37
84

You can't change the height of the br tag itself, as it's not an element that takes up space in the page. It's just an instruction to create a new line.

You can change the line height using the line-height style. That will change the distance between the text blocks that you have separated by empty lines, but natually also the distance between lines in a text block.

For completeness: Text blocks in HTML is usually done using the p tag around text blocks. That way you can control the line height inside the p tag, and also the spacing between the p tags.

2
  • When you style-up br - you are only changing the 'marker'. Line-break, that br triggers, - belongs to parent container. jsfiddle.net/w7gDE/1
    – c69
    Commented Sep 30, 2011 at 20:43
  • 6
    Also element should have display: block, otherwise line-height will have no effect
    – Oleg
    Commented Jul 2, 2018 at 18:49
22

Take a look at the line-height property. Trying to style the <br> tag is not the answer.

Example:

<p id="single-spaced">
  This<br> text
  <br> is
  <br> single-spaced.
</p>
<p id="double-spaced" style="line-height: 200%;">
  This<br> text
  <br> is
  <br> double-spaced.
</p>

1
  • 13
    As a side note: The problem with line height is that it affects both <br> and space between lines of a continous text. Being able to customize br would allow the designer to just affect line breaks. Commented Nov 27, 2014 at 16:22
9

Use the content property and style that content. Content behavior is then adjusted using pseudo elements. Pseudo elements ::before and ::after both work in Mac Safari 10.0.3.

Here element br content is used as the element anchor for element br::after content. Element br is where br spacing can be styled. br::after is the place where br::after content can be displayed and styled. Looks pretty, but not a 2px <br>.

br { content: ""; display: block; margin: 1rem 0; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }

The br element line-height property is ignored. If negative values are applied to either or both selectors to give vertical 'lift' to br tags in display, then correct vertical spacing occurs, but display incrementally indents display content following each br tag. The indent is exactly equal to the amount that lift varies from actual typographic line-height. If you guess the right lift, there is no indent but a single pile-up line exactly equal to raw glyph height, jammed between previous and following lines.

Further, a trailing br tag will cause the following html display tag to inherit the br:after content styling. Also, pseudo elements cause <br> <br> to be interpreted as a single <br>. While pseudo-class br:active causes each <br> to be interpreted separately. Finally, using br:active ignores pseudo element br:after and all br:active styling. So, all that's required is this:

br:active { }

which is no help for creating a 2px high <br> display. And here the pseudo class :active is ignored!

br:active { content: ""; display: block; margin: 1.25em 0; }
br { content: ""; display: block; margin: 1rem; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }

This is a partial solution only. Pseudo class and pseudo element may provide solution, if tweaked. This may be part of CSS solution. (I only have Safari, try it in other browsers.)

Learn web development: pseudo classes and pseudo elements

Pay attention to global elements - BR at Mozilla.org

8

The line height of the br tag can be different from the line height of the rest of the text inside a paragraph text by setting font-size for br tag.

Example: br { font-size: 200%; }

0
6

You can control the <br> height if you put it inside a height limited div. Try:

<div style="height:2px;"><br></div>
4
  • 7
    Note that you don't even need the <br> anymore when using this approach. It renders the same with and without it, because a <div> is a block-level element that already causes a break, and a single <br> in a <div> isn't rendered.
    – Peter B
    Commented Apr 12, 2019 at 14:46
  • Yes, but you would at least need a &nbsp; otherwise I believe the height will be of null
    – PalDev
    Commented Jan 29, 2020 at 21:06
  • 1
    Wrong: a div without content will still have height this way. You could and should have checked before posting.
    – Peter B
    Commented Jan 30, 2020 at 9:55
  • 1
    The question was about setting the br height and not a div height. And to the point of my comment, in some cases an empty div height will be null like when the div floats, or when the parent position is absolute if I recall properly, in such cases you must add an &nbsp; or set the min-height
    – PalDev
    Commented Feb 1, 2020 at 11:05
3

As the 'margin' doesn't work in Chrome, that's why I used 'border' instead.

br {
  display: block;
  content: "";
  border-bottom: 10px solid transparent; // Works in Chrome/Safari
}
@-moz-document url-prefix() {
  br {
    margin-bottom: 10px; // As 'border-bottom' doesn't work in firefox and 'margin-bottom' doesn't work in Chrome/Safari.
  }
}
2
  • While answering a question is a welcome contribution, sometimes it would be helpful to provide some context to code-only answers.
    – teunbrand
    Commented Jul 31, 2019 at 7:31
  • 2
    This works in Chrome now: br { display: block; content: ""; margin-bottom: 5px; }
    – Ben in CA
    Commented Jan 31, 2020 at 20:55
2

The BR is anything but 'extra-special': it is still a valid XML tag that you can give attributes to. For example, you don't have to encase it with a span to change the line-height, rather you can apply the line height directly to the element.

You could do it with inline CSS:

This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br style="line-height:40vh"/>
break!

Notice how two line breaks were used instead of one. This is because of how CSS inline elements work. Unfourtunately, the most awesome css feature possible (the lh unit) is still not there yet with any browser compatibility as of 2019. Thus, I have to use JavaScript for the demo below.

addEventListener("load", function(document, getComputedStyle){"use strict";
  var allShowLineHeights = document.getElementsByClassName("show-lh");
  for (var i=0; i < allShowLineHeights.length; i=i+1|0) {
    allShowLineHeights[i].textContent = getComputedStyle(
      allShowLineHeights[i]
    ).lineHeight;
  }
}.bind(null, document, getComputedStyle), {once: 1, passive: 1});
.show-lh {padding: 0 .25em}
.r {background: #f77}
.g {background: #7f5}
.b {background: #7cf}
This is a small line
<span class="show-lh r"></span><br /><span class="show-lh r"></span>
break. Whereas, this is a BIG line
<span class="show-lh g"></span><br /><span class="show-lh g"></span>
<span class="show-lh b"></span><br style="line-height:40vh"/><span class="show-lh b"></span>
break!

You can even use any CSS selectors you want like ID's and classes.

#biglinebreakid {
  line-height: 450%;
  // 9x the normal height of a line break!
}
.biglinebreakclass {
  line-height: 1em;
  // you could even use calc!
}
This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!

You can find our more about line-height at the W3C docs.

Basically, BR tags are not some void in world of CSS styling: they still can be styled. However, I would recommend only using line-height to style BR tags. They were never intended to be anything more than a line-break, and as such they might not always work as expected when using them as something else. Observe how even after applying tons of visual effects, the line break is still invisible:

#paddedlinebreak {
  display: block;
  width: 6em;
  height: 6em;
  background: orange;
  line-height: calc(6em + 100%);
  outline: 1px solid red;
  border: 1px solid green;
}
<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<br id="paddedlinebreak" />
break.
</div>

A work-around for things such as margins and paddings is to instead style a span with a br in it like so.

#paddedlinebreak {
  background: orange;
  line-height: calc(6em + 100%);
  padding: 3em;
}
<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<span id="paddedlinebreak"><br /></span>
break.
</div>

Notice how the orange blob above is the span that contains the br.

0
1

#biglinebreakid {
  line-height: 450%;
  // 9x the normal height of a line break!
}
.biglinebreakclass {
  line-height: 1em;
  // you could even use calc!
}
This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!

1

You can write br tag as show

<br style="content:''; padding: 10px 0;" />

Change padding value to 10px to anything you like.

Note: As padding is specified, height increases in both directions(top and bottom)

0

The line height of the <br> can be different from the line height of the rest of the text inside a <p>. You can control the line height of your <br> tags independently of the rest of the text by enclosing two of them in a <span> that is styled. Use the line-height css property, as others have suggested.

<p class="normalLineHeight">
  Lots of text here which will display on several lines with normal line height if you put it in a narrow container...
  <span class="customLineHeight"><br><br></span>
  After a custom break, this text will again display on several lines with normal line height...
</p>
1
  • 2
    The issue is about theming br without changing html, for example for redesigns of old websites where 2 br tags where used instead of the proper p tag.
    – LarS
    Commented Aug 11, 2015 at 23:53
0
<font size="4"> <font color="#ffe680">something here</font><br>

I was trying all these methods but most didn't work properly for me, eventually I accidentally did this and it works great, it works on chrome and safari (the only things I tested on). Replace the colour code thing with your background colour code and the text will be invisible. you can also adjust the font size to make the line break bigger or smaller depending on your desire. It is really simple.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.