Change Height Using CSS
Answer :
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.
This feels very hacky, but in chrome 41 on ubuntu I can make a <br>
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; }
<div class="raw"> <h2>Raw <code>br</code>rrrrs</h2> bla<BR><BR>bla<BR>bla<BR><BR>bla </div> <div class="old"> <h2>margin & font size</h2> bla<BR><BR>bla<BR>bla<BR><BR>bla </div> <div class="just-font"> <h2>only font size</h2> bla<BR><BR>bla<BR>bla<BR><BR>bla </div> <div class="just-margin"> <h2>only margin</h2> bla<BR><BR>bla<BR>bla<BR><BR>bla </div> <div class="brbr"> <h2><code>br</code>others vs only <code>br</code>s</h2> bla<BR><BR>bla<BR>bla<BR><BR>bla </div>
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.
Take a look at the line-height
property. Trying to style the <br>
tag is not the answer.
Example:
<p id="single-spaced"> This<br> text<br> is<br> single-spaced. </p> <p id="double-spaced" style="line-height: 200%;"> This<br> text<br> is<br> double-spaced. </p>
Comments
Post a Comment