25. Перенос строки (br) и разделительная линия (hr) в HTML

Ранее вы изучили тег <p> в HTML, с помощью которого можно добавить абзац на веб-страницу. В этом уроке изучим теги <br> и <hr>.

Перенос строки (<br>) при помощи HTML или CSS

Перевод строки, перенос строки, перенос на новую строку – это все об одном. В языке HTML перенос на новую строку применяется часто. Есть несколько путей: использовать тег <br> для перевода на новую строку, а можно использовать свойства CSS для переноса строки.

Рассмотрим пример использования тега переноса строки:

Здесь текст
<br>
Этот текст на новой строке 

В CSS перенос строки можно осуществить по-разному, например вот так:

.br {
    float: left;
    width: 100%;
    margin: 0 0 20px 0; /* отступ после строки 20 пикселей */
} 

Здесь текст
<div class = "br"></div>
Этот текст на новой строке 

Разделительная линия (<hr>) при помощи HTML или CSS

В HTML создать разделительную линию очень просто. Используется тоже непарный тег <hr> - это и есть разделительная линия.

Разделительная линия начинается с новой строки и после нее есть отступ. Вы можете управлять стилем горизонтальной линии, а так же можно сделать альтернативу ей. Далее пример разделительной линии при помощи тега <hr>:

Здесь текст
<hr>
И здесь текст 

А теперь давайте стилизуем (изменим стили, изменим внешний вид) нашу разделительную линию:

hr {
    width: 80%; /* ширина линии */
    height: 4px; /* высота / толщина линии */
    background: #333; /* фон / цвет линии */
    border: 0; /* рамка вокруг разделительной линии (уберем ее) */
    margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */
} 

И создадим альтернативу нашей разделительной линии при помощи тега <div> и CSS:

.line {
    width: 80%; /* ширина линии */
    height: 4px; /* высота / толщина линии */
    background: #333; /* фон / цвет линии */
    border: 0; /* рамка вокруг разделительной линии (уберем ее) */
    margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */
} 

Здесь текст
<div class = "line"></div>
Здесь текст 

Вот и все. Сделать перенос строки и создать разделительную линию в HTML очень просто, вы сами это сейчас поняли. Далее пройдите практику и тест, после чего погружайтесь в нумерованные списки.

Похожие уроки Codebra

1. Вам уже дан куб и в нем три линии. Вам нужно добавить три тега <hr> так, чтобы получилось 16 квадратов.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.