How big is the line break?

6
Hello, I would like to know if there is a default size for the line break in HTML ( <br> ), whether it depends on the size of the font being used and how to change it.

    
asked by anonymous 31.03.2015 / 18:38

3 answers

5

As I understand you want to increase the size of the br, as the base line-height is 100%, increase as needed. The default value of line-height is normal, it is calculated by the value multiplied by font-size.

I found this example that uses div but it also works for br and may help you to understand:

div { line-height: 1.2;   font-size: 10pt }   /* number */ 
div { line-height: 1.2em; font-size: 10pt }   /* length */ 
div { line-height: 120%;  font-size: 10pt }   /* percentage */
div { line-height: 12pt;  font-size: 10pt }   /* length */

br{
line-height: 200%;
}

br {
  height: 1000px;
  width: 1000px;
  background-color: red;
  border: 1px solid black;
  display: block;
  line-height: 300%;
}
<div>a<br>b<br>c</div>



<div>
  a
  <br>
  b
  <br>
  c
</div>

As discussed, it is inadvisable to force the br tag and it depends on each browser, but there is a cross browser solution

br {line-height: 200%; content: " "} 
    
31.03.2015 / 18:51
5

The br tag does not represent a blank line, but rather a line break.

With the code below it is easy to see that no visual attribute works with br . You can not change even the display ... or anything. ... I was wrong, almost nothing ... varying in browser behavior for browser =)

br {
  height: 1000px;
  width: 1000px;
  background-color: red;
  border: 1px solid black;
  display: block;
  line-height: 150%; /* no Chrome isso vai funcionar, caso não exista o caractere '\n' após a tag 'br' */
}
<div>
  a
  <br/>b<br/> c
</div>
    
31.03.2015 / 20:17
3

@haykou, note that <br /> has its behavior affected by a simple \n , not to mention that the behavior of the css applied in it differs a lot from browser to browser, so it is a poor choice to mount the layout of a page.

You can find quotes about what should be avoided for BR in various documentation

Mozilla :

  

Do not use <br> to increase the gap between lines of text;

     

Use the CSS margin property or the <p> element.

W3Schools

  

Tip: The <br> tag is useful for writing addresses or poems.

     

Note: Use the <br> tag to enter line breaks, not to separate paragraphs.

    
31.03.2015 / 20:44