/css/text-indent:> Отступ первой строки_

Свойство text-indent

Синтаксис

CSS 1
CSS 2‒2.2
CSS 3
text-indent: <длина> | <процент> | inherit

Описание

Свойство text-indent (от англ. "text indent" ‒ «отступ текста») определяет отступ перед первой форматируемой строкой (красной строкой) в блочном контейнере.

Применяется: к блочным контейнерам;
Наследование: присутствует;
Проценты: относительно ширины блочного родительского элемента;
Медиа: визуальные.
Пример красной строки
Красная строка

Примечание

  • До CSS 3.0 данное свойство влияет только на первую форматируемую строку элемента. То есть, например, отступ не вставляется в середину элемента, который был разбит другим элементом (например, таким как «br» в HTML).
  • Поскольку свойство «text-indent» наследуется, то оно будет влиять на вложеные встроено-блочные элементы. По этой причине, зачастую разумней указывать «text-indent: 0» для элементов, которые определены как «display:inline-block».

JavaScript

[объект].style.textIndent="[значение]";


Поддержка браузерами

Chrome
Поддерж.[1]
Firefox
Поддерж.[1]
Opera
Поддерж.[1]
Maxthon
Поддерж.[1]
IExplorer
Поддерж.[1]
Safari
Поддерж.[1]
iOS
Поддерж.[1]
Android
Поддерж.[1]
  • [1] ‒ поддерживает синтаксис CSS 1-2.2.

Спецификация


Значения

<длина>
Задаёт отступ фиксированной длины.

text-indent: 1.5em;

<процент>
Процент от ширины содержательного блока.

text-indent: 12%;

each-line
Отступ влияет на первую строку блока-контейнера, а также на каждую строку после принудительного разрыва строки, но не влияет на строки после разрыва по символу мягкого переноса.
hanging
Инвертирует то на какие строки влияет.
inherit
Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: «0».

Примечание: допускаются отрицательные значения, но при этом в конкретной реализации могут существовать определённые ограничения. Если значение данного свойства является отрицательным или превышает ширину блока, то текст первой строки может выходить за пределы блока. При этом будет ли отображаться текст выходящий за пределы блока зависит от свойства «overflow».


Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство text-indent</title>
<style type="text/css">
blockquote { text-indent: 2em; }
</style>
</head>
<body>
<h1>Красная строка</h1>
<div style="display: inline-block; width: 320px;">
<blockquote style="margin:0;">Есть лица, которые существуют на свете не как предмет, а как посторонние крапинки или пятнышки на предмете. Сидят они на том же месте, одинаково держат голову, их почти готов принять за мебель и думаешь, что отроду ещё не выходило слово из таких уст; а где-нибудь в девичьей или в кладовой окажется просто: ого-го!</blockquote>
<p style="text-align: right;"><b>Н.В. Гоголь</b>, «Мёртвые души»</p>
</div>
</body>
</html>
Свойство text-indent