text-indent: отступ первой строки
text-indent задаёт отступ первой строки текстового блока и позволяет оформить абзац без лишних пробелов в HTML.
Назначение
text-indent задаёт отступ первой строки текстового блока и позволяет оформить абзац без лишних пробелов в HTML.
Как это работает
Обычное положительное значение смещает начало первой строки. Остальные строки остаются на исходной границе. Процент зависит от ширины содержащего блока, а не от числа символов.
Пример
<style>
.paragraph{max-width:26rem;text-indent:1.5em;line-height:1.6}
</style>
<p class="paragraph">Первая строка этого абзаца начинается с отступа. Когда текст переносится, следующие строки возвращаются к обычной левой границе блока.</p>Что должно получиться
Начало абзаца имеет красную строку, но весь блок не сдвигается. Отступ относится к строке текста, а не к внешнему положению контейнера.
Граница применения и частая ошибка
Не применяйте одновременно большой отступ первой строки и крупный вертикальный разрыв между каждым абзацем без редакционной причины. В интерфейсах короткие подписи обычно не нуждаются в красной строке.
Самостоятельная проверка
Уменьшите ширину абзаца до нескольких строк и убедитесь, что смещается только первая. Затем замените text-indent на padding-left и объясните отличие.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.