Change 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
, I know

Answer 1

This feels very hacky, but in chrome 41 on ubuntu I can make a
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;
}

  
Raw brrrrrs
  bla

bla
bla

bla

  

  
margin & font size
  bla

bla
bla

bla

  

  
only font size
  bla

bla
bla

bla


 

  
only margin
  bla

bla
bla

bla

   

  
brothers vs only brs
  bla

bla
bla

bla

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.