Change <br> height using CSS

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.

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.

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>

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

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

<div style="height:2px;"><br></div>