margin-top	margin-right	margin-bottom
margin-left	margin	padding-top
padding-right	padding-bottom	padding-left
padding	border-top-width	border-right-width
border-bottom-width	border-left-width	border-width
border-top-color	border-right-color	border-bottom-color
border-left-color	border-color	border-top-style
border-left-color	border-right-style	border-bottom-style
border-left-style	border-style	border-top
border-right	border-bottom	border-left
border	border-radius (CSS3)	outline-width
outline-color	outline

     Блочная модель 

Каждый элемент располагается в блоке, состоящем из содержимого этого элемента, рамки (border), промежуточной области между содержимым и границей элемента (padding), а также полей (margin). Изучение этих свойств поможет в дальнейшем, когда вы будете задавать вид странице.

      margin-top, margin-right, margin-bottom, margin-left  

Устанавливает ширину поля для определенной стороны элемента.(эти свойства устанавливает ширину соответственно верхнего, нижнего и левого поля).

Значение:

• любая соответствующая стандарту длина - число, представляющее ширину поля. Значение по умолчанию является 0.
• любое соответствующая стандарту процентное значение - отношение в процентах ширены поля к ширине элемента (для левого и правого поля) и его высоте (для верхнего и нижнего поля).
• inherit - применяется значение родительского элемента.

Примеры: [1][2][3]

      margin  

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

Значение:

• margin-top - ширина верхнего поля.
• margin-right - ширина правого поля.
• margin-bottom - ширина нижнего поля.
• margin-left - ширина левого поля.
• inherit - применяется значение родительского элемента.

      padding-top, padding-right, padding-bottom, padding-left  

Устанавливает ширину промежутка между содержимым элемента и определенным его участком его границы (соответственно верхнем, правым, нижним и левым).

Значение:

• none - отсутствие изменения регистра (по умолчанию).
  
• любая соответствующая стандарту длина - число, представляющее ширину промежутка. Значение по умолчанию является 0.
• любое соответствующая стандарту процентное значение - отношение в процентах ширены промежутка к ширине элемента (для левого и правого поля) и его высоте (для верхнего и нижнего поля).
• inherit - применяется значение родительского элемента.

     padding  

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

Значение:

• padding-top - ширина верхнего промежутка.
• padding-right - ширина правого промежутка.
• padding-bottom - ширина нижнего промежутка.
• padding-left - ширина левого промежутка.
• inherit - применяется значение родительского элемента.

      border-top-width, border-right-width, border-bottom-width, border-left-width  

Устанавливает ширину рамки для определенной стороны (соответственно верхней , правой, нижней и левой). Рамка проходит между полем и основной частью элемента.

Значение:

• thin - рамка в виде тонкой линии.
• medium - рамка в виде линии средней толщены. (по умолчанию)
• thick - рамка виде толстой линии.
• inherit - применяется значение родительского элемента.

Примеры: [1]

      border-width  

Удобное свойство для установки ширены рамки сразу для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу ко всем сторонам рамки. Если два значения, то первое из них присваивается верхней и нижней стороне, а второе - левой и правой. Если же три, то первое значение присваивается верхней стороне, второе - левой и правой, а третье - нижней стороне рамки.

Значение:

• border-top-width - толщина верхней стороны.
• border-right-width - толщина правой стороны.
• border-bottom-width - толщина нижней стороны.
• border-left-width - толщина левой стороны.
• inherit - применяется значение родительского элемента.

Примеры: [1]

      border-top-color, border-right-color, border-bottom-color, border-left-color  

Устанавливает цвет рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Рамка проходит между полем и основной частью элемента.

Значение:

• любое соответствующее стандарту значение цвета.
• inherit - применяется значение родительского элемента.

Примеры: [1]

      border-color  

Удобное свойство для установки цвета рамки сразу для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу ко всем сторонам рамки. Если два значения, то первое из них присваивается верхней и нижней стороне, а второе - левой и правой. Если же три, то первое значение присваивается верхней стороне, второе - левой и правой, а третье - нижней стороне рамки.

Значение:

• border-top-color -цвет верхней стороны.
• border-right-color - цвет правой стороны.
• border-bottom-color - цвет нижней стороны.
• border-left-color - цвет левой стороны.
• inherit - применяется значение родительского элемента.

Примеры: [1]

      border-top-style, border-right-style, border-bottom-style, border-left-style  

Устанавливает стиль рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Рамка проходит между полем и основной частью элемента.

Значение:

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

Примеры: [1]

      border-style  

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

Значение:

• border-top-style - стиль верхней стороны.
• border-right-style - стиль правой стороны.
• border-bottom-style - стиль нижней стороны.
• border-left-style - стиль левой стороны.
• inherit - применяется значение родительского элемента.

Примеры: [1]

      border-top, border-right, border-bottom, border-left  

Удобное свойство для установки нескольких свойств линии рамки для определенной стороны (соответственно верхней, правой, нижней и левой). Каждое отдельное свойство применяется к указанной для него стороне. следующие определения относятся к верхней стороне.

Значение:

• border-top-width - ширина верхней рамки.
• border-top-style - стиль верхней рамки.
• border-top-color - цвет верхней рамки.
• inherit - применяется значение родительского элемента.

Примеры: [1]

      border  

Удобное свойство для определения рамки сразу со всех сторон элемента. Значение устанавливается одинаковыми для всех его сторон.

Значение:

• border-width - толщина границ.
• border-style - стиль границ.
• border-color - цвет границ.
• inherit - применяется значение родительского элемента.

Примеры: [1]

      border-radius (CSS3)  

Задает радиус закругления углов элемента. Данное свойство является нововидением в CSS3, и в настающее время поддерживается только двумя браузерами: Mozilla Firefox и Webkit.

Для Mozilla Firefox:

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

Примеры: [1]

Для Webkit:

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

      outline-width  

Удобное свойство для установки ширины границ сразу для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу ко всем сторонам рамки. Если два значения, то первое из них присваивается верхней и нижней стороне, а второе - левой и правой. Если же три, то первое значение присваивается верхней стороне, второе - левой и правой, а третье - нижней стороне рамки.

Значение:

• thin - граница в виде тонкой линии.
• medium - граница в виде линии средней толщины. (по умолчанию)
• thick - граница виде толстой линии.
• inherit - применяется значение родительского элемента.

      outline-style  

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

Значение:

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

      outline-color  

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

Значение:

• invert - цвет границы инвертируется.
• inherit - применяется значение родительского элемента.

      outline  

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

Значение:

• outline-width - толщина общей границы.
• outline-style - стиль общей границы.
• outline-color - цвет общей границы.