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

Область с циферкой 1 называется внешней областью элемента. Она может быть также и внутренней областью родительского элемента, т.е. элемента являющегося внешним для нашего текущего элемента. Эта область будет недоступной для элемента и предназначена она для других, например, как место для текста на рисунке.

Область 2 давайте будем называть внешним отступом элемента, по забугорному зовется margin. Эта область нужна для отделения границы элемента от внешней среды. Границей же элемента является область 3 и в простонародии зовется border. Область с номером 4 является внутренним отступом элемента от границы, зовется она padding.

Желтая область с номерком 5 является областью самого элемента. Этим элементом естественно может быть что угодно, например, текст или изображение.

После того, как разберетесь с областями я уже могу сказать "Всеми этими областями можно управлять". Под управлением здесь подразумевается изменение размеров и цветов. На рисунке все выглядит квадратно, но CSS предоставляет уникальную возможность устанавливать параметры для каждой части области. Например всю область можно разделить на четыре части: верхнюю, правую, нижнюю, левую. Запомните этот порядок, т.к. он очень важен при описании частей области, для более простого запоминания следуйте по часовой стрелке.

Как я уже сказал внешней областью мы управлять не можем, так что давайте узнаем какие параметры существуют у внешней области. Для данной области существует возможность установки только размера. Размер устанавливается также как мы обычно делали с помощью параметров margin-top, margin-right, margin-bottom, margin-left. Они устанавливают размеры со всех четырех сторон. Естественно все уже поняли, что задать размер всей области таким способом довольно-таки жирно получится. Как раз для такой вот "экономии места" предназначен параметр margin. В нем через пробел задаются значения размеров всех четырех сторон элемента в том порядке, о котором я говорил выше. Значения размера могут иметь, как всегда :-), абсолютное, относительное и процентное значение. Также для задания границ существует зарезервированное слово auto, но я думаю оно никогда Вам не пригодится. Осталось отметить одно хорошее свойство задания размеров. Если Вы при задании margin написали только одно значение размера, то он автоматически назначается всем сторонам области. Если же Вы задали больше значений, но не все, то размер неизвестной стороны берется равным размеру противоположной стороны. Пример:

 p { margin: 1px 2px 3px } 

 p { margin-top: 1px;
 margin-right: 2px;
 margin-bottom: 3px;
 margin-left: 2px } 

Совершенно аналогично можно задавать размеры внутреннего отступа, у нас он под 4 номером. Делается все с помощью параметров padding-top, padding-right, padding-bottom, padding-left или одним общим padding.

Областью с самим обильным количеством параметров естественно является граница элемента, она у нас 3. Для нее можно задать размер, цвет, стиль линии. Давайте чтобы не описывать тучу параметров просто объясню как строить их имена. Для задания ширины линии используется слово width, для цвета colob, для стиля style. После этого Вы можете строить имя параметра по следующей схеме:

 border-сторона-свойство: значение;
 border-свойство: верх право низ лево;

Теперь более подробвно с каждым свойством. Свойство width можно задавать также как мы всегда задавали размеры. Для него также существуют уже зарезервированные значения: thin, medium, thick. Эти три значения задают соответственно тонкий, средний и толстый тип для линии. По умолчанию для всех элементов толщина линии установлена как средняя, т.е. medium.

Свойство color задается стандартно как все цветовые значения, я кстати говорил о задании цветовых параметров несколькими шагами раньше.

Свойство style оказалось самым болатым на зарезервированные значения, потому что пронумеровать все стили и не запутаться невозможно. Поэтому успользуются только символьные значения, т.е. попросто названия стилей:

• none - стиль отсутствует, также при этом игнорируются любые значения border-width
• dotted - линия из точек
• dashed - линия из маленьких линий, по научному завется пунктирной :-)
• solid - сплошная линия
• double - рисуется две линии сразу, т.е. получается рамка. Общий размер двух линий равен border-width, а между линиями промежуток в один пиксел.
• groove, ridge, inset, outset - все эти стили изображают трехмерные рамки, которые закрашивают с использованием цветов border-color. Сами пробуйте, что из них вам больше подходит :-)

Всем свойствам рамки также присущи методы интеграции, или лучше сказать глобализации. То бишь задавать все параметры разом. Тут есть некоторая иерархия. Параметры из трех слов, т.е. типа border-top-style задают конкретное свойство конкретной стороны рамки. Параметры из двух слов (типа border-color) задают конкретное свойство для всех сторон рамки. Ну, а самый глобальным параметр border задает все перечисленные свойства для всех сторон рамки. Причем думаю при использовании этого параметра вам уже будет сложно что-либо детализировать для отдельной части.

Осталась у нас последняя область, это область самого элемента. Для нее параметры выглядят более короткими :-) Два параметра width, height задают его размер, по умолчанию они оба заданы как auto. Они могут принимать абсолютные и относительные размеры, при этом в горизонтальный размер можно задавать через проценты. И еще два параметра float, clear управляют "плаваньем" этого элемента. Т.е. float задает обтекание элемента текстом: left - слева, right - справа (и еще none - без обтекания). А параметр clear очищает пространство у родителей с обтеканием. Если у родителя обтекание задано как left, то при использовании clear: left; элемент будет помещен после элемента с обтеканием, т.е. не войдет в обтекающее содержимое. Значения для этого параметра четыре: none, left, right, both. Последнее значения используется для неизвестного заранее типа обтекания, т.е. для обоих его значений.

Вот еще один большой кусок кучи разгребли :-)