How big is the line break?

Asked

Viewed 3,224 times

6

Hi, I was wondering if there is a default size for line breaking in HTML (<br>), whether it depends on the size of the font being used and how to change it.

html css

  • What do you call the line break size? Do you know that besides the font size, the size of where this line is, all this influences? You can even question what a line is. Or do you just want to know abstractly if a text is too long, regardless of how it is presented on the screen?

  • I want to know how to change the size of a blank line using <br>.

  • 4

    the use of <br /> to control the layout is not advisable, try instead to manipulate the padding, margin and height of your <div>

3 answers

5


From what I understand you want to increase the size of br, as the line-height base 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 also works for br and maybe helps you 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 depends on each browser, however there is a cross browser solution

br {line-height: 200%; content: " "}

  • Have option in pixels too?

  • px I believe that

  • Thank you!! = Area Code

  • 1

    This answer is wrong, please look at @Miguelangelo’s reply

  • The answer is not wrong, but there is a controversial part about the br. The part that talks to use line-height to control the height of the line is, in fact, correct.

  • I mean, as far as line-height applied to the element div, as was the case with the first example.

Show 1 more comment

5

The tag br not a blank line, but a line break.

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

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>

  • If you leave <div>a<br>b<br>c</div>, here at least I can change the line-height of br

  • @haykou Em que browser? The above example shows no change in FF and Chrome. Is it something non-standard?

  • 1

    The behavior of formatting <br/> varies from browser to browser, but for example: br{display:block;margin:10px 0;} should already ruin your thesis @Miguelangelo :P +1

  • @haykou How bizarre... really if there are no characters \n the line-height is affected.

  • @mgibsonbr I use everything in codepen and with Chrome.

  • @haykou In fact, your updated example worked in Chrome. But in Firefox, no difference... It’s definitely something non-standard. :(

  • This of n I understand as a bug. The tag is "auto-closing", it could not change behavior with an external element.

  • @mgibsonbr The behavior is too strange... if the br has a character \n after him there the line-height has no effect, otherwise ai has (in Chrome only) seems some bizarre in the implementation of Chrome.

  • 2

    @Bacco It is as I said earlier, the behavior varies from browser to browser. According to the rule, one <br/> has not box-model soon should not affect spacing or anything like that... But in some browsers it affects, in others it does not. It goes without saying that the <br/> serves the simple purpose of passing the text that comes after it to the bottom line, nothing more :)

  • @mgibsonbr, I tested here without the DOCTYPE of html and it didn’t work in firefox/IE, but with doctype the line-height worked well.

Show 5 more comments

3

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

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

Mozilla:

Do not use <br> to Increase the gap between Ines 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.

  • I posted this comment as an answer, because I believe it is too big for a simple inline comment, if necessary I can delete the same.

  • As you said in the comment above, I agree that it is inadvisable, I don’t know why anyone would actually do it but it seems that other people have tried to do the same. I found a better explanation here http://stackoverflow.com/questions/899252/can-you-target-br-with-css

  • +1 By reply comment. = P (extremely relevant)... although I have a certain repulsion by W3Schools, what they said is correct... but if it had been me, I would look for another source who says the same thing just not to give more PR to them.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.