Установка полей и высоты строк
При работе с текстом Web-страницы часто бывает необходимо оставить пустое место между текстом и левым и правым краем окна браузера. Поля позволяют сделать Web-страницы, содержащие большое количество текста, менее устрашающими за счет введение пустого пространства, на котором могут отдохнуть глаза посетителя. Кроме того, поля могут применяться для организации текста в колонки или увеличения интервалов между абзацами, как показано на рис. 4.10.
До появления правил каскадных списков стилей, которые позволяют устанавливать свойства полей и четко контролировать интервалы вокруг элементов Web-страниц, для позиционирования текста использовались HTML-таблицы. Например, для создания полей между текстом и краями Web-страницы текст помещался в таблицу с тремя столбцами. Помещая текст в средний столбец, оставляя два крайних столбца пустыми и устанавливая необходимую их ширину, можно было добиться получения пустых полей между текстом и левым и правым краями Web-страницы.
Рис. 4.10. Использование полей для разделения текста на отдельные части
ПРАКТИКУМ
Свойства полей каскадных списков стилей позволяют четко контролировать пустое пространство, которое Web-браузер оставляет между элементами и краями Web-страницы и между соседними элементами. Вы имеете возможность выбирать между четырьмя свойствами полей: margin-left, margin-right, margin-top и margin-bottom. В имени каждого свойства присутствует название края элемента, возле которого будет создаваться поле. Например, для создания поля шириной 40 пикселей между объектами на странице и левым и правым краями окна браузера вставьте в список стилей следующее правило:
body {margin-left:40px; margin-right:4Орх}
Для управления шириной левого и правого полей между абзацами текста и краями Web-страницы заключите абзацы в начальный и конечный дескрипторы раздела (<div></div>), а затем, как показано ниже, примените правило каскадного списка стилей к дескрипторам <div>:
<body>
<р>Браузер не затрагивает границы этого абзаца.</р>
<div style="margin-left:10%;margin-right:10%>
<р>Браузер ВЫРОВНЯЕТ этот абзац из расчета 10% ширины окна.</р>
<р>Браузер ВЫРОВНЯЕТ также и этот абзац из расчета 10% ширины окна. CSS-правило для дескриптора раздела применяется для обоих абзацев.</р>
</div>
<р>Брауэер не затрагивает границы этого абзаца.</р>
</body>
Обратите внимание, что для указания ширины полей можно использовать любые единицы, допустимые для каскадных списков стилей (пискелы, пункты, m, дюймы, миллиметры, сантиметры и т.д.). В приведенном примере правило каскадного списка стилей в дескрипторе <div> заставляет браузер оставить между текстом абзаца и левым и правым краем Web-страницы поле шириной 10% ширины окна браузера.
Для управления полями над и под элементом используются свойства margin-top и margin-bottom соответственно. Например, если между абзацами необходимо вставить поле шириной в две строки, можно следующим образом определить селектор абзаца (р):
р {margin-bottom:2em}
Для вставки между абзацами поля шириной в 1.5 ширины нормального поля между абзацами измените стиль дескриптора абзаца <р>, не прибегая к заданию правила списка стилей для селектора абзаца (р). Например, для вставки между текущим абзацем и следующим дополнительного пустого поля шириной в полстроки можно воспользоваться следующим правилом:
<р style="margin-top:I.5em">
При необходимости вставки полей между строками в одном абзаце, в отличие от полей между абзацами, воспользуйтесь свойством каскадных списков стилей line-height. По умолчанию для свойства line-height установлено значение lem. Поэтому в следующем примере Web-браузер вставит между строками двух отдельных абзацев поле одной и то же ширины:
<body>
<р>Это первая строка абзаца 1<br>
Это вторая строка абзаца 1</р>
<р style="line-height:1em">Это первая строка абзаца 2<br>
Это вторая строка абзаца 2</р>
</body>
Для создания двойного интервала между строками (т.е. фактически для помещения между строками пустой строки) одного абзаца в правиле списка стилей установите значение свойства line-height равным 2em, как показано в следующем примере:
<р style=line-height:2em">