30. Перенос строки и разделительная линия в HTML

Перенос строки при помощи HTML или CSS

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

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

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

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

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

Разделительная линия при помощи HTML или CSS

В HTML создать разделительную линию очень просто. Используется тоже непарный тег <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>
Здесь текст

Похожие уроки и записи блога

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

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

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.