На этом шаге мы рассмотрим задание отступов от краев блока, задание ширины и цвета частей границы.
Имеется возможность задавать отступы от краев блока. Ширина верхнего, правого, нижнего и левого отступа определяется значением, соответственно, свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding позволяет одновременно установить значения всех четырех отступов элемента. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству.
Изменим каскадную таблицу стилей примера из предыдущего шага следующим образом:
<HTML>
<HEAD>
<TITLE>Форматирование поля</TITLE>
<STYLE TYPE="text/css">
<!--
P {margin: 10px 120px; border-style: solid;
padding: 30px;}
-->
</STYLE>
</HEAD>
<BODY>
<P>Это первый блок.
<P>Это второй блок.
</BODY>
</HTML>
Результат просмотра измененного таким образом HTML-документа приведен на рисунке 1.
Рис.1. Результат просмотра измененного HTML-документа в браузере
Ширину верхней, правой, нижней или левой границы задают соответственно свойствами border-top-width, border-right-width, border-bottom-width и border-left-width. Значения свойства border-width определяют ширину границы элемента для всех перечисленных ее частей. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству. Значениями этих свойств могут быть ключевые слова thin, medium и thick или значение длины. Ширина границы, определяемая ключевыми параметрами, зависит от браузера. Единственное, что можно гарантировать, - это то, что ширина thin не больше ширины medium, которая, в свою очередь, не больше ширины thick.
Цвета частей границы задаются значениями свойств border-top-color, border-right-color, border-bottom-color и border-left-color. Свойство border-color определяет цвета всех частей границы. Четыре параметра цвета подчиняются все тем же правилам, описанным при задании полей элемента. Если задан тип границы (см. следующий шаг), но не задан цвет границы, то по умолчанию используется цвет самого элемента. Все предыдущие установки свойств границы не будут иметь никакого воздействия на отображение элемента, если не установлен тип границы, так как по умолчанию тип границы не определен, и она не отображается.
На следующем шаге мы закончим изучение этого вопроса.
