В официальном руководстве CSS набор этих свойств называется Box Attributes. Box, потому что свойства эти изменяют отображение не текста, содержащегося в тэге элемента, а самого этого элемента как графической области (прямоугольника с плавающими размерами). Какие же свойства может иметь прямоугольник? Правильно, размеры, рамку, отступ и тому подобное. Обратите внимание, что под отступом понимается в данном случае расстояние всей строки (абзаца) от базового края, а не первой его линии, как это было со свойством text-indent.
Перед тем как приступить к собственно атрибутам, полезно будет рассмотреть единицы, которыми можно задавать длины в таблицах стилей.
Рекомендую ограничиться первыми тремя типами размерностей. Остальные сильно зависят от установленного на мониторе логического разрешения (пикселей/дюйм), и, как следствие, не обеспечивают одинакового отображения страницы на разных медиа-устройствах.
Помимо абсолютных, используются также относительные меры длин (проценты).
input { border-width: 8px }
table {width: 100% }
Значения высоты и ширины, применимые к блочным элементам и элементам ввода. В дальнейшем, при рассмотрении некоторых свойств CSS2 и соответствующих возможностей JavaScript, мы увидим, что размер и положение можно будет менять не только для блочных (элементов с определяемой шириной и высотой), но и для таких тэгов, как <div>, например. Задаются в элементах длины. table { width:80%; height:100% }
Полезно таким образом растягивать таблицу документа верхнего уровня. Для того, чтобы таблицу эту выровнять по центру (в случае width<100%), следует воспользоваться внешним тэгом <center> или любым другим, имеющим свойство text-align: center
Опреляет такой интересный аспект HTML и CSS, как "плавание" изображений и других элементов в тексте, и соответственно "обтекание" текстом этих элементов. Первой отвечает за плавание и может принимать значения left, right, none - соотвественно, разрешение плавать слева, справа, или отключение этой возможности. Второй - Clear - определяет, разрешено ли обтекание данным элементом других плавающих слева, справа, с обеих сторон или запрещено - left, right, both, none.
Атрибуты, определяющие соответствующие отступы для элемента. Атрибут Margin устанавливает отступ со всех сторон.
td.menu { margin: 3px; margin-bottom: 0 }
Внутренний отступ элемента, для соответствующей стороны. Крайне полезное свойство, если Вы не сторонник слипшихся таблиц и изображений.
table { padding: 5px }
У элемента может быть рамка, существующая, вообще говоря, на границе между margin и padding. Рамка, заданная одним из нижеописанных способов - простой и достаточно эффектный (если применять со вкусом) метод выделения определенных участков документа.
h1.title {border-width: 1px; border-top-width: 0 }
Ну, первое свойство, как это ни парадоксально, определяет цвет рамки. Здесь никаких особых причуд не наблюдается, цвет задается как обычно в CSS. Border-Style дает возможность изменить вид бордюра. А бывает он (вид) таким:
Значений много, все они довольно разные и симпатичные. Некоторые из них при ширине обрамления меньше двух будут выглядеть сплошной линией, поэтому ширину следует выбирать соответствующую.
Свойство Border позволяет задать все эти атрибуты разом в одном флаконе. Синтаксис таков:
border: border-width | border-style | color
Например:
h2 { border: 1px solid silver }