/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
[объект]
Поддержка браузерами
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>
<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