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

The BR is anything but 'extra-special': it is still a valid XML tag that you can give attributes to. For example, you don't have to encase it with a span to change the line-height, rather you can apply the line height directly to the element.

You could do it with inline CSS:

This is a small line


break. Whereas, this is a BIG line




break!

Notice how two line breaks were used instead of one. This is because of how CSS inline elements work. Unfourtunately, the most awesome css feature possible (the lh unit) is still not there yet with any browser compatibility as of 2019. Thus, I have to use JavaScript for the demo below.

addEventListener("load", function(document, getComputedStyle){"use strict";
  var allShowLineHeights = document.getElementsByClassName("show-lh");
  for (var i=0; i < allShowLineHeights.length; i=i+1|0) {
    allShowLineHeights[i].textContent = getComputedStyle(
      allShowLineHeights[i]
    ).lineHeight;
  }
}.bind(null, document, getComputedStyle), {once: 1, passive: 1});

.show-lh {padding: 0 .25em}
.r {background: #f77}
.g {background: #7f5}
.b {background: #7cf}

This is a small line


break. Whereas, this is a BIG line




break!

You can even use any CSS selectors you want like ID's and classes.

#biglinebreakid {
  line-height: 450%;
  // 9x the normal height of a line break!
}
.biglinebreakclass {
  line-height: 1em;
  // you could even use calc!
}

This is a small line


break. Whereas, this is a BIG line




break! You can use any CSS selectors you want for things like this line




break!

You can find our more about line-height at the W3C docs.

Basically, BR tags are not some void in world of CSS styling: they still can be styled. However, I would recommend only using line-height to style BR tags. They were never intended to be anything more than a line-break, and as such they might not always work as expected when using them as something else. Observe how even after applying tons of visual effects, the line break is still invisible:

#paddedlinebreak {
  display: block;
  width: 6em;
  height: 6em;
  background: orange;
  line-height: calc(6em + 100%);
  outline: 1px solid red;
  border: 1px solid green;
}

This is a padded line


break.

A work-around for things such as margins and paddings is to instead style a span with a br in it like so.

#paddedlinebreak {
  background: orange;
  line-height: calc(6em + 100%);
  padding: 3em;
}

This is a padded line


break.

Notice how the orange blob above is the span that contains the br.