Change <br> height using CSS

Question

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.

Answer 1

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.

Answer 2

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.