Line breaks in HTML
Line break/new line
Line break, or forced new line, is written <BR> and works exactly like when you press enter on the keyboard. A new line in the source code, i.e. pressing enter in the HTML code, is only used to ad line numbers to the code, for when you look for errors. The line breaks cannot be seen in text when shown in a browser, for this purpose only <BR> can be used. The only property a line break has, is a height. In a text, it will have the same height as the text in which it is written.
Sometimes you can get a visually better expression on your page by having another distance on breaks than the distance inherent in the line height, e.g. 1.5 times the line distance as space between two paragraphs, instead of line height or two times the line height, equivalent to one or two times <BR>. For this there is a couple of solution to be used, depending on the situation.
You can insert a line break in a SPAN or DIV and define a font size, e.g. <SPAN STYLE="font-size:18.0pt"><BR></SPAN> or margin/padding, e.g. <DIV STYLE="margin:100px"><BR></DIV>. It is not an elegant solution, but in the absence of other options, it is an excellent backup solution. Most importantly, it works in all browsers!
If you are working in a test section e.g. <DIV> or <H1>, it is far easier to adjust the distance to the next section of text using one of the stylings padding-bottom or margin-bottom. Be aware that some tags have an integrated line break, so the padding/margin along with a <DIV> may give a bit more effect than anticipated.
The easiest solution is to use STYLE and margin on the BR-tag. Here you should be aware that margin goes all the way around the tag, so a 100px margin will give 200px height, because you have both top and bottom. The smarter alternative here, is to use margin-top or margin-bottom. A line break with the height 100px will look like this: <BR style="margin-bottom:100px">. Only downside to this otherwise easy solution is that not all browsers follow the instruction and make a normal size page break. Therefore, if you use this solution, you have to check that is does not produce any undesirable effects on the page.
Sometimes you can get a visually better expression on your page by having another distance on breaks than the distance inherent in the line height, e.g. 1.5 times the line distance as space between two paragraphs, instead of line height or two times the line height, equivalent to one or two times <BR>. For this there is a couple of solution to be used, depending on the situation.
You can insert a line break in a SPAN or DIV and define a font size, e.g. <SPAN STYLE="font-size:18.0pt"><BR></SPAN> or margin/padding, e.g. <DIV STYLE="margin:100px"><BR></DIV>. It is not an elegant solution, but in the absence of other options, it is an excellent backup solution. Most importantly, it works in all browsers!
If you are working in a test section e.g. <DIV> or <H1>, it is far easier to adjust the distance to the next section of text using one of the stylings padding-bottom or margin-bottom. Be aware that some tags have an integrated line break, so the padding/margin along with a <DIV> may give a bit more effect than anticipated.
The easiest solution is to use STYLE and margin on the BR-tag. Here you should be aware that margin goes all the way around the tag, so a 100px margin will give 200px height, because you have both top and bottom. The smarter alternative here, is to use margin-top or margin-bottom. A line break with the height 100px will look like this: <BR style="margin-bottom:100px">. Only downside to this otherwise easy solution is that not all browsers follow the instruction and make a normal size page break. Therefore, if you use this solution, you have to check that is does not produce any undesirable effects on the page.