Приступим к форматированию абзаца. Определим параметры полей, отступов и границ.

Для установки ширины полей используется свойство margin. Правило margin:50px установит для каждого поля ширину 50 пикселей.

Большинство случаев требует чтобы каждое поле имело свою ширину. Для задания ширины верхнего поля используйте margin-top, для правого - margin-right, для нижнего - margin-bottom, для левого - margin-left.

Для указания отступов следует пользоваться свойством padding. Оно работает аналогично свойству margin.

border - ещё одно полезное свойство. Оно предназначено для задания стиля границам (ширина, начертание). Свойство border-width определяет значение ширины границы блока Свойство border-color устанавливает цвет границы блока. Border-style задаёт стиль линии(сплошная, двойная, пунктирная и т.д.). Border-style может принимать следующие значения:

• none - граница отсутствует;
• hidden - граница не отображается;
• dotted - пунктирная линия;
• dashed - штрихпунктирная линия;
• solid - сплошная линия;
• double - две сплошные линии;
• groove - вдавленная линия;
• ridge - выпуклая линия;
• inset - весь блок выглядит как бы вдавленным;
• outset - весь блок выглядит как бы выпуклым.

Наиболее важные абзацы можно выделить цветом (color - цвет текста, background-color - цвет фона).

Приведём пример:

<style>
p
{
 margin:5px;
 padding:20px;
 background-color:#eee;
 border-style:solid;
 border-width:1px;
 text-align:justify;
}
</style>

Результат будет выглядеть так:

Получилось неплохо. Теперь для сделаем аккуратней: выровняем текст по правой и левой границам (text-align:justify;), зададим отступ для первой строки (text-indent:30px;).

Спецификация CSS2 предусматривает псевдоэлементы first-line и first-letter - первая строка и первая буква соответственно. Создадим стили и для них. В итоге получится что-то вроде:

<style>
p
{
 margin:5px;
 padding:20px;
 background-color:#eee;
 border-style:solid;
 border-width:1px;
 text-align:justify;
 text-indent:30px;
}
p:first-line
{
 font-family:arial;
}
p:first-letter
{
 font-size:30px;
}
</style>

Вот итог наших стараний: