CSS. Каскадные таблицы стилей. Подробное руководство.Символ-Плюс 2008

Для свойства text-indent можно также задавать отрицательные значения, получая довольно интересные результаты. Чаще всего таким способом создают «выступы» — при этом первая строка выдвигается влево относительно края элемента:

р {text-incfent:-4em;}

Задавая отрицательное значение text-indent, будьте аккуратны:первые три слова («This is а») могут быть отсечены левым краем окна броузера. Во избежание неприятностей для создания отрицательного абзацного отступа я рекомендую применять поля:

р {text-indent:-4em; padding-left:4em;}

Однако отрицательные отступы могут быть полезны. Рассмотрим следующий пример, показанный на рис. 6,2, в котором к тексту добавляется «обтекаемое» изображение:

p.hang {text-indent:-25рх;}

<img src="star.gif" style="width:60px; height:60px;

float:left;" alt="An image of a five-pointed star."/>

<p class="hang"> This paragraph has a negatively indented first line, which

overlaps the floated,image that precedes the text. Subsequent lines do not

overlap the image, since they are not indented in any way.</p>

Puc. 6.2. Плавающее изображение и отрицательный отступ

Эта простая методика позволяет реализовывать некоторые интересные конструкции.

С text-indent могут применяться любые единицы измерения длины, в том числе процентные значения. В следующем случае процентное значение вычисляется относительно ширины родительского элемента. Иначе говоря, если значение отступа задается равным 10%, то первая строка элемента будет сдвинута на 10% ширины его родительского элемента, как показано на рис. 6.3;

div {width:400рх;} р {text-indent:10%;}

<div>

Рис. 6.3. Задание отступа с помощью процентных значений