Отступы и рамки (стили CSS)

<margin-top> - Отступ сверху - {margin-top:10px}
<margin-right> - Отступ справа - {margin-right:20px}
<margin-bottom> - Отступ снизу - {margin-bottom:30px}
<margin-left> - Отступ слева - {margin-left:10%}
<margin> - Группа свойств, значения перечисляются отступы снаружи по часовой стрелке, начиная сверхнего отступа
{margin:10px 20px 30px 40px}
{margin:20px} /*отступ 20px со всех сторон/

Возможные значения:

• значение с единицей измерения
• относительное значения в поцентах

Применение: любые элементы

<padding-top> - Отступ сверху - {padding-top:10px}
<padding-right> - Отступ справа - {padding-right:20px}
<padding-bottom> - Отступ снизу - {padding-bottom:30px}
<padding-left> - Отступ слева - {padding-left:10%}
<padding> - Группа свойств, значения перечисляются отступы внутри по часовой стрелке, начиная сверхнего отступа
{padding:10px 20px 30px 40px}
{padding:20px} /*отступ 20px со всех сторон/

Возможные значения:

• значение с единицей измерения
• относительное значения в поцентах

Применение: любые элементы

.zag1{border-width:1px} -
Толщина всей рамки 1px для класса zag1
{border-top-width:2px} - Толщина верхней рамки 2px
{border-right-width:thin} - Толщина правой рамки
{border-bottom-width:thick} - Толщина нижней рамки
{border-left-widtht:5pt} - Толщина левой рамки
#1{border-width:1px thin 2px 2px} -
Толщина элементов рамки для идентификатора 1
(в теле:<h3 id=1>Заголовок с разной толщиной элементов рамки</h3>).
Значения перечисляются по часовой стрелке, начиная с верхнего элемента рамки.

Возможные значения:

• значение с единицей измерения
• thin, medium, thick (самый тонкий, средний, толстый)

Применение: любые элементы

.div1{border-color:red} - Цвет всей рамки
{border-top-color:red} - Цвет верхней рамки
{border-right-color:white} - Цвет правой рамки
{border-bottom-color:white} - Цвет нижней рамки
{border-left-color:#00cc00} - Цвет левой рамки

Возможные значения:

• название цвета (red, green, white...)
• RGB-значение, например:
• #00cc00
• rgb(0,204,0)
• rgb(0%80%0%)
Применение: любые элементы

{border-top-style:dotted} - Стиль верхней рамки
{border-right-style:solid} - Стиль правой рамки
{border-bottom-style:dashed} - Стиль нижней рамки
{border-left-style:double} - Стиль левой рамки .div1{border-style:solid} - Стиль всей рамки

h2{border-width:1px;
border-style:dotted dotted solid groove}/*стиль каждого элемента рамки для тега h2*/
Группа свойств, значения перечисляются по часовой стрелке, начиная сверхнего элемента рамки

Возможные значения:

• none
• значение, например:
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
Применение: любые элементы

{border-top:1px red dotted} -
Группировка свойств верхнего элемента рамки
{border-right:2px blue dashed} -
Группировка свойств правого элемента рамки
{border-left:4px blue inset} -
Группировка свойств левого элемента рамки
{border-bottom:4px black double} -
Группировка свойств нижнего элемента рамки

{border:1px red solid}
{border:double 6px}
Группа свойств для всех элементов рамки

Группы свойств для различных элементов рамки:

• border-top
• border-right
• border-left
• border-bottom

Возможные значения для всей рамки:

• border-width
• border-style
• border-color