Красная строка css или отступ первой строки абзаца

красная строка css

В этой статье хочу Вам рассказать о том, как добавить левый отступ для первой строки абзаца. Как Вы знаете, это принято делать для каждого первого абзаца главы, статьи или иногда еще добавляется для всех существующих абзацев.

Добавляется этот отступ с помощью CSS свойства text-indent, в значение, которого указывается длина отступа. В качестве значения необходимо использовать одно из всех доступных единиц измерения в CSS (пиксели - px, дюймы - in, пункты – pt, проценты и др. )

Например, зададим для каждой первой строки, у каждого абзаца, левый отступ в размере 20px.

HTML код:

<p>
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas at tellus vel leo egestas consequat. Nam id felis nibh. Sed id turpis leo. Suspendisse eu neque quis diam lobortis auctor.
</p>
<p>
    Vestibulum at dui convallis, rutrum est sit amet, volutpat neque. Vivamus molestie suscipit nisl, eu efficitur sapien interdum sit amet. Aenean euismod mi ut sodales ullamcorper. Vivamus dictum eu arcu eu aliquet. Etiam at dolor at ligula tempus tempor. Aenean a maximus leo. Duis ultrices volutpat eros sit amet sollicitudin.
</p>

CSS код:

p{
    text-indent: 20px;
}

Открываем страницу в бразуере и смотрим на результат:

Отступ первой строки для каждого абзаца

Если хотим задать отступ лишь для первого абзаца, то в этом случае лучше воспользоваться таким селектором как класс. То есть, для начала задаем класс первому абзацу, потом в стилях для этого класса задаем правило text-indent с нужным значением.

Сейчас я продемонстрирую Вам это на примере.

HTML код:

<p class=first_paragraph >
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas at tellus vel leo egestas consequat. Nam id felis nibh. Sed id turpis leo. Suspendisse eu neque quis diam lobortis auctor.
</p>
<p>
    Vestibulum at dui convallis, rutrum est sit amet, volutpat neque. Vivamus molestie suscipit nisl, eu efficitur sapien interdum sit amet. Aenean euismod mi ut sodales ullamcorper. Vivamus dictum eu arcu eu aliquet. Etiam at dolor at ligula tempus tempor. Aenean a maximus leo. Duis ultrices volutpat eros sit amet sollicitudin.
</p>

CSS код:

.first_paragraph{
    text-indent: 20px;
}

И вот результат:

Отступ первой строки для первого абзаца

И на этом все, больше нечего рассказать по этой теме. Теперь Вы знаете, как задать левый отступ для первой строки абзаца с помощью CSS свойства text-indent.

Похожие статьи:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: %date%