Установка свойств управоения полями

Спецификация CSS поддерживает ряд свойств (типа box), которые можно ьзовать для форматирования блока текста, принадлежащего элементу. К этим свойствам относятся следующие:

· свойство margin добавляет невидимое (прозрачное) поле вокруг элемента, снаружи от видимой рамки (если она имеется);

· свойство border отображает видимую рамку - определенного стиля -вокруг элемента, снаружи от просвета (если он имеется);

· свойство padding добавляет просвет непосредственно снаружи от содержимого элемента, но внутри рамки (если она имеется);

· свойства задания размеров height и width устанавливают размеры области содержимого элемента с добавленными просветом и рамкой (см. следующий рисунок);

Рисунок 26. Схема текстовой области

· свойства задания позиций float и clear устанавливают положение элемента относительно окружающих элементов.

По умолчанию ширина полей вокруг элемента равна нулю. Чтобы добавить поле с одной или с нескольких сторон элемента, можно присвоить ненулевое значение одному или нескольким из следующих свойств:

· margin-top;

· margin-right;

· margin-bottom;

· margin-left.

Можно устанавливать для этих свойств любые значения в размерных единицах. Например, следующее правило добавляет поле слева и справа от элемента STANZA. Ширина поля в два раза больше высоты текста элемента:

STANZA

{margin-left:2em;

margin-right:2em}

Также можно устанавливать величину поля в процентах относительно ширины родительского элемента. Например, следующее правило создает левое поле, равное 1/4 от ширины родительского элемента:

STANZA (margin -left: 25%}

Можно назначать одинаковые величины полей по всем четырем сторонам элемента путем присвоения одного значения — в размерных единицах или в процентах - свойству margin. В качестве примера возьмем таблицу стилей, представленную в Листинге 1.7, которая присоединена и XМL-документу, представленному в Листинге 1.8. В соответствии с этой таблицей стилей текст отображается без полей.

РОЕМ

{font-size:small}

РОЕМ, TITLE, AUTHOR, STANZA, VERSE {display:block}

Листинг 1.7

<?xml version=”1.0”?>

<?xml-stylesheet type=”text/css” href=”Ruslud.css”?>

<POEM>

<TITLE>Руслан и Людмила</TITLE>

<AUTHOR>Пушкин Александр Сергеевич</AUTHOR>

<STANZA>

<VERSE>У лукоморья дуб зелёный;</VERSE>

<VERSE>Златая цепь на дубе том:</VERSE>

<VERSE>И днём и ночью кот учёный</VERSE>

<VERSE>Всё ходит по цепи кругом;</VERSE>

<VERSE>Идёт направо &#8212; песнь заводит,</VERSE>

<VERSE>Налево &#8212; сказку говорит,</VERSE>

</STANZA>

<STANZA>

<VERSE>Там чудеса: там леший бродит,</VERSE>

<VERSE>Русалка на ветвях сидит;</VERSE>

<VERSE>Там на неведомых дорожках</VERSE>

<VERSE>Следы невиданных зверей;</VERSE>

<VERSE>Избушка там на курьих ножках</VERSE>

<VERSE>Стоит без окон, без дверей;</VERSE>

</STANZA>

</POEM>

Листинг 1.8

Рисунок 27. Вид в браузере документа из листинга 1.8

&#8212; есть ссылка на символ для увеличенного тире (-).

Добавив следующее правило в таблицу стилей, которое устанавливает поля в 2,5еm по всем четырем сторонам элементов STANZA, можно получить то, что представлено на рисунке.

STANZA {margin:2.5em}

Зона полей всегда прозрачна, т.е. через нее видна фоновая заливка или фоновый рисунок родительского элемента (или браузера).

Рисунок 28. Вид в браузере документа из листинга 1.8 с изменёнными полями по всем четырём сторонам элемента STANZA