Предыдущие примеры выравнивания параграфа слева показывают их в "блочном стиле", в котором все строки текста прижаты к левому полю. Однако широко распространено использование отступа для первой строки параграфа, чтобы визуально выделить начало нового параграфа. Отступ первой строки на самом деле не требуется, когда параграфы разделены пустыми строками, как в случае страниц Web; тем не менее, такое форматирование может применяться для смягчения внешнего вида страниц.
Для создания отступа первой строки параграфа используется свойство стиля text-indent. Величина отступа задается числом пикселей или как процент от ширины страницы.
Таблица 3.4. Свойство задания отступа и значения | |
Свойство: |
Значение |
text-indent |
npx n% |
Следующий код делает отступ первой строки двух параграфов, первого на 25 пикселей и второго на 5% ширины страницы. Вывод в браузере показан на рисунке 3.10 .
Пример 25.24. Задание отступа первых строк параграфов
<p style="text-indent:25px">Этот параграф форматируется с помощью style="text-indent:25px". Первая строка параграфа смещается на 25 пикселей от левого поля. Остальные строки параграфа прижаты к левому полю и переносятся по словам по правому полю.</p> <p style="text-indent:5%">Этот параграф форматируется с помощью style="text- indent:5%". Первая строка параграфа смещается на 5 процентов ширины страницы от левого поля. Остальные строки параграфа прижаты к левому полю и переносятся по словам по правому полю. </p>
Рис. 3.10. Отступ первой строки текста в параграфах
В этом примере значения в пикселях и процентах задают примерно одинаковую величину отступа первой строки. Однако при использовании измерения в процентах для отступа параграфа помните, что это значение основано на ширине страницы. Будет создаваться отступ разной величины, в зависимости от ширины окна браузера. Чтобы сохранить фиксированную величину отступа, независимо от размера окна, задавайте значение в пикселях, а не в процентах.