Красная строка CSS

CSS отступ красной строки

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


text-indent : 2px;

2px – отступ два пикселя


text-indent : 1em;

1em – отступ 1em


text-indent : inherit;

inherit – наследует параметры родителя

Красная строка CSS

HTML

<div class="text-block">
  <p class="indent">
    Текст с отступом 20px.
  </p>
  <p>
    Текст без отступа.
  </p>
</div>


CSS

.text-block{	
    padding-top: 3px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 3px;
    border-left-width: 8px;
    border-left-style: solid;
    border-left-color: #f30;
    background-color: #fc0;
    display: inline-block;
}
.text-block p{
    font-size: 20px;
}
.text-block .indent{
    text-indent: 20px;
}