3.1. The transfer line and separator line in HTML

Line break using HTML or CSS

Line, line wrapping, the line is all about one thing. In HTML, the course the line is used often. There are several ways: use the tag <br> for new line, and you can use CSS properties for line breaks. Let's consider an example of using the tag line:

Here is the text
<br>
This text on a new line

In CSS line wrapping can be done in different ways, for example:

.br {
    float: left;
    width: 100%;
    margin: 0 0 20px 0; /* indent after line 20 pixels */
}

Here is the text
<div class = "br"></div>
This text on a new line

The dividing line using HTML or CSS

In HTML to create a dividing line is very simple. Also used an unpaired tag <hr> - this is the dividing line. The dividing line starts a new line and after it there is an indent. You can control the style of the horizontal line, and you can make an alternative to it. Next, an example of the dividing line by using the tag:

Here is the text
<hr>
And here the text

Now let's stylize (change styles changing the visual appearance) our dividing line:

hr {
    width: 80%; /* the line width of the */
    height: 4px; /* the height / thickness of the line */
    background: #333; /* background / line color */
    border: 0; /* the frame around the dividing line (remove it) */
    margin: 5px 0 5px 0; /* the padding above and below the line 5 pixels */
}

And create an alternative to our dividing lines by means of tag <div> and CSS:

.line {
    width: 80%; /* the line width of the */
    height: 4px; /* the height / thickness of the line */
    background: #333; /* background / line color */
    border: 0; /* the frame around the dividing line (remove it) */
    margin: 5px 0 5px 0; /* the padding above and below the line 5 pixels */
}

Here is the text
<div class = "line"></div>
And here the text