Change <br> height using CSS

Issue

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.

Solution

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.

Answered By - Guffa