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

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.