html中怎么设置br的高度,html - How to change the height of a <br>? - Stack Overflow

UPDATED Sep. 13, 2019:

I use
to make an oversized line break, when I need one. Until today, I styled it like this:

br.big {line-height:190%;vertical-align:top}

(The vertical-align:top was only needed for IE and Edge.)

That worked in all the major browsers that I tried: Chrome, Firefox, Opera, Brave, PaleMoon, Edge, and IE11.

However, it recently stopped working in Chrome-based browsers: my "big" line breaks turned into normal-sized line breaks.

(I don't know exactly when they broke it. As of Sep 12, 2019 it still works in my out-of-date Chromium Portable 55.0.2883.11, but it's broken in Opera 63.0.3368.71 and Chrome 76.0.3809.132 (both Windows and Android).)

After some trial and error, I ended up with the following substitute, which works in the current versions of all those browsers:

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

Notes:

line-height:190% works in everything except recent versions of Chrome-based browsers.

vertical-align:top is needed for IE and Edge (in combination with line-height:190%), to get the extra space to come after the preceding line, where it belongs, rather than partially before and partially after.

display:block;content:"";margin-top:0.5em works in Chrome, Opera & Firefox, but not Edge & IE.

An alternative (simpler) way of adding a bit of extra vertical space after a
tag, if you don't mind editing the HTML, is with something like this. It works fine in all browsers:

(You can, of course, adjust the "-37%" as needed, for a larger or smaller gap.) Here's a demo page which includes some other variations on the theme:



May 28, 2020:

I've updated the demo page; it now demonstrates all of the above techniques: