Как сделать отступ текста в css
Перейти к содержимому

Как сделать отступ текста в css

  • автор:

text — indent

С помощью text — indent можно создать «красную строку» — добавить отступ для первой строки абзаца.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 5 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство text — indent управляет отступом первой строки текста: либо вытягивает строку за пределы абзаца, либо утягивает её внутрь. Используется для выделения начала абзаца при плотном наборе без отступов между абзацами.

Строка смещается по горизонтали относительно начала строки.

Пример

Скопировать ссылку «Пример» Скопировано

Значение в пикселях:

 div  text-indent: 20px;> div  text-indent: 20px; >      

Процент рассчитывается от ширины блока:

 div  text-indent: 15%;> div  text-indent: 15%; >      

Значения ключевых слов:

Пример корректно отображается только в Safari. Он выглядит следующим образом:

Пример text-indent

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Ключевые слова

Скопировать ссылку «Ключевые слова» Скопировано

Ключевые слова являются экспериментальными и официально не предусмотрены в спецификации CSS.

  • hanging — инвертирует отступы в строках. Добавляет отступ в каждой строке, кроме первой.
  • each — line — добавляет отступы в каждой строке после принудительного разрыва строки (с помощью ).

Единицы измерения

Скопировать ссылку «Единицы измерения» Скопировано

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

Как сделать отступ между словами в css

Обычно про наборе текста для формирования пространства между словами используется пробел. Иногда это расстояние необходимо скорректировать. В CSS существует свойство word-spacing положительное значение которого прибавит к текущему пробелу указанное значение, тем самым увеличивая отступ между словами, и отрицательное, соответственно — убавит.

Пример ниже добавит к каждому пробелу дополнительные 15px.

 Добавим к словам дополнительный отступ 
p  word-spacing: 15px; > 

text-indent

Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.

Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.

Начальное значение 0
Применяется к блочные контейнеры
Наследуется да
Проценты ссылается на ширину содержащего блока
Обработка значения процент, как указан или абсолютная длина, а также любые ключевые слова
Animation type длина, проценты или calc();

Синтаксис

/* значение */ text-indent: 3mm; text-indent: 40px; /* значение зависит от ширины блока*/ text-indent: 15%; /* значения ключевых слов */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* международные значения */ text-indent: inherit; text-indent: initial; text-indent: unset; 

Значения

each-line Экспериментальная возможность (экспериментальное значение)

Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса.

hanging Экспериментальная возможность (экспериментальное значение)

Отступ добавляется ко всем строкам, кроме первой.

Формальный синтаксис

text-indent =
[ (en-US) ] (en-US) && (en-US)
hanging? (en-US) && (en-US)
each-line? (en-US)

=
| (en-US)

Простые примеры отступов

HTML

p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p> p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. p> 

CSS

p  text-indent: 5em; background: powderblue; > 

text-indent

Устанавливает величину отступа первой строки блока текста (например, для абзаца

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

Синтаксис

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

    text-indent   

Огневое нападение бывает пяти видов: первое, когда сжигают людей; второе, когда сжигают запасы; третье, когда сжигают обозы; четвертое, когда сжигают склады; пятое, когда сжигают отряды.

Сунь-цзы, Искусство войны. Перевод Николай Конрад.

Результат данного примера показан на рис. 1.

Применение свойства text-indent

Рис. 1. Применение свойства text-indent

Объектная модель

[window.]document.getElementById(» elementID «).style.textIndent

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *