Разберем некоторые особенности работы с блоками.

Каждый элемент располагается в определенном блоке, который состоит из отступов(Padding), границы(Border), а также полями(Margin).

Устанавливает поля от  границы текущего элемента до внутренней границы родительского элемента. 

При установке в CSS имеет место написание несколькими способами:

1)   x {margin-top: 10px;} Указывать значение поля с определенной стороны

2)   x {margin: 20px 30px 5px 10px} Указывать 2,3 или 4 значения. Если 2, то первое-значения полей верхних и нижних, в второе- право и лево.

Если 3, то первое значение верхнего поля, второе - левое и правое, а третье - нижнее. Ну а если 4 то верхнего, правого, нижнего и левого соответственно.

Устанавливает размер отступов содержимого блока от его границ. 

Устанавливать знаение также можно по отдельности для каждой стороны(   х {padding-top: 20px}) или же сразу для всех:

Тут аналогично полям,  первое значение верхнего поля, второе - левое и правое, а третье - нижнее. Ну а если 4 то верхнего, правого, нижнего и левого.

Мы можлием устанавливать различный стили рамок вашего html элемента или убрать её. Имейте ввиду, если вам не нужна рамка, всеравно пропишите толщину ей ноль, ибо мозилла по дефолту ставит 1, а опера ноль.

Эти параметры устанавливают ширину рамки для определенной стороны.

Но опять таки, проще использовать параметр  border-width , который может иметь до 4 значений и устанавливает сразу все границы.

Все просто, если 1 значение- для всех сторон, 2-первое установит верх и низ, а второе право и лево, 3 значения- первое установит верх, второе право и лево, а третье низ.

Цвета для рамок можно задавать параметром  border-color(для всех сторон сразу) или же по отдельности:

Стиль для рамки устанавливается парамером border-style(для всех сразу), и

для установки для каждой стороны.

Значения:

-none - линия отсутствует. 
-hidden - линия тоже отсутствует, но для таблицы это значение действует по другому 
-dotted - пунктирная линия. 
-dashed - штрихпунктирная линия. 
-solid - сплошная непрерывная линия. 
-double - двойная сплошная линия. 
-groove - трехмерная борозда. 
-ridge - трехмерный гребень. 
-inset - трехмерная вырезка. 
-outset - трехмерный орнамент. 
-inherit - применяется значение родительского элемента.

При установки для всех сторон сразу такаяже система как в предыдущих.

Для установки НЕСКОЛЬКИХ свойст сразу, применяется border.

Он по порядку устанавливает такие свойства как: ширина, стиль и цвет. Можно устанавливать сразу для всех сторон, можно для отдельных.

Для всех: x { border:1px solid red;} 

Для отдельной: x {border-top: 1px solid red;}

Также края элементов можно закруглять, это делается  border-radius . Но это CSS3. Пока поддержка данного свойста только у мозиллы и вебкит.

Для Mozilla Firefox:

-moz-border-radius – закругляет все углы элемента.
-moz-border-radius-topleft - закругляет верхний левый угол.
-moz-border-radius-topright - закругляет верхний правый угол.
-moz-border-radius-bottomleft - закругляет нижний левый угол.
-moz-border-radius-bottomright - закругляет нижний правый угол.

x {border:1px solid black; -moz-border-radius:5px;}

Для Webkit: 

-webkit-border-radius - закругляет все углы элемента.
-webkit-border-top-left-radius - закругляет верхний левый угол.
-webkit-border-top-right-radius - закругляет верхний правый угол.
-webkit-border-bottom-left-radius - закругляет нижний левый угол.
-webkit-border-bottom-right-radius - закругляет нижний правый угол.

x {border:1px solid black; -webkit-border-top-left-radius:5px;  -webkit-border-bottom-right-radius:5px;}