Отступ

Отступ в первой строке абзаца веб-страницы – один из самых распространенных после форматирования текста эффектов. Некоторые сайты создают иллюзию структурированности текста, помещая перед первой буквой абзаца небольшие прозрачные изображения, которые сдвигают текст. На других сайтах применяют совершенно не соответствующий установленным стандартам1 тег SPACER. Благодаря CSS появился более удачный способ структурирования текста – свойство text-indent. В случае применения text-indent первая строка любого элемента может быть смещена на заданную величину, даже если эта величина отрицательная. Чаще всего это свойство применяется, конечно, для создания абзацного отступа в первой строке:

p {text-indent: 3em;}

Согласно этому правилу первая строка любого абзаца будет сдвинута на 3em. В общем случае свойство text-indent можно применять к любому блочному элементу. Его нельзя применять к строковым элементам или к замещаемым элементам, таким как изображения. Но если в первой строке блочного элемента, например, абзаца, есть изображение, то оно будет сдвинуто вместе со всем остальным текстом строки.

Для свойства text-indent можно также задавать отрицательные значения, получая довольно интересные результаты.


Чаще всего таким способом создают «выступы» – при этом первая строка выдвигается влево относительно края элемента:

p {text-indent: -4em;}

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

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

Однако отрицательные отступы могут быть полезны. Рассмотрим следующий пример:

p.hang {text-indent: -25px;}
An image of a five-pointed star.

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.



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


Иначе говоря, если значение отступа задается равным 10%, то первая строка элемента будет сдвинута на 10% ширины его родительского элемента:

div {width: 400px;}
p {text-indent: 10%;}


This paragraph is contained inside a DIV, which is 400px wide, so the
first line of the paragraph is indented 40px (400 * 10% = 40). This is
because percentages are computed with respect to the width of the element.




Обратите внимание, что такая организация абзаца применяется только к первой строке элемента, даже если вставить разрывы строки. Самое интересное, что свойство text-indent является наследуемым, и это может приводить к неожиданным эффектам. Например, рассмотрим разметку:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
This first line of the DIV is indented by 50 pixels.


This paragraph is 200px wide, and the first line of the paragraph
is indented 50px. This is because computed values for 'text-indent'
are inherited, instead of the declared values.





Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
В середине
Вертикальное выравнивание текста
Выравнивание по базовой линии
Выравнивание по верхнему краю
Выравнивание по заданному расстоянию

Вернуться в раздел: CSS / 6. Свойства текста