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

Свойства Box

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

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

[1] длина (+)

[2] процент (+)

[3] auto - автоматически

*Применимо для: всех элементов

Описание: определяет верхнее, нижнее, правое и левое поля бокса

ПРИМЕР:

margin-top:100

 

Margin

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

[1] margin-top

[2] margin-right

[3] margin-bottom

[4] margin-left

*Применимо для: всех элементов

Описание: обобщает все вышеперечисленные свойства

ПРИМЕР:

margin: 2em /* все поля установлены в 2em */

margin: 1em 2em /* верхнее и нижнее = 1em, правое и левое = 2em */

margin: 1em 2em 3em /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */

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

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

[1] длина (+)

[2] процент (+)

*Применимо для: всех элементов

Описание: верхнее, правое, нижнее и левое заполнение для бокса

ПРИМЕР:

padding-top:100pt

 

 

Padding

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

[1] padding-top

[2] padding-right

[3] padding-bottom

[4] padding-left

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение – задается единый отступ для всех сторон, если два – то задаются различные отступы для прилежащих сторон, если четыре – то задаются индивидуальные отступы для всех сторон, если три – то четвертое значение берется из второго

ПРИМЕР:

padding:100px

 

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

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

[1] длина (+)

[2] thin - тонкая

[3] medium - средняя

[4] thick - толстая

*Применимо для: всех элементов

Описание: толщина верхней, правой, нижней и левой линии рамки для бокса

ПРИМЕР:

border-top-width:100pt

 

Border-width

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

[1] border-top-width

[2] border-right-width

[3] border-bottom-width

[4] border-left-width

*Применимо для: всех элементов

Описание: толщина рамки. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение - задается единая толщина для всех сторон, если два - то задаются различная толщина для прилежащих сторон, а если четыре - то задаются индивидуальная толщина для всех сторон

ПРИМЕР:

border-width: 15pt

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

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

[1] цвет (+)

*Применимо для: всех элементов

Описание: цвет верхней, правой, нижней и левой линии рамки

ПРИМЕР:

border-top-color:green

 

Border-color

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

[1] border-top-color

[2] border-right-color

[3] border-bottom-color

[4] border-left-color

[5] transparent – рамка прозрачная

*Применимо для: всех элементов

Описание: цвет рамки

ПРИМЕР:

border-color:red green yellow black

border-color: transparent

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

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

[1] none - нет рамки

[2] hidden - тоже, что и none, за исключением конфликтных ситуаций в таблицах

[2] dotted - рамка из точек

[3] dashed - рамка из пунктирных линий

[4] solid - рамка из сплошной линии

[5] double - двойная сплошная линия

[6] groove - рамка выглядит как вырезанная в канве

[7] ridge - рамка выглядит как выступающая над канвой

[8] inset - весь бокс выглядит вдавленным в канву

[9] outset - противоположно 'inset': выпуклый бокс

*Применимо для: всех элементов

Описание: стиль верхней, правой, нижней и левой линии рамки

ПРИМЕР:

border-top-style: solid

 

Border-style

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

[1] border-top-style

[1] border-right-style

[1] border-bottom-style

[1] border-left-style

Описание: стиль рамки. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение - задается единый стиль для всех сторон, если два - то задаются различные стили для прилежащих сторон, а если четыре - то задаются индивидуальные стили для всех сторон

*Применимо для: всех элементов

Описание: стиль рамки

ПРИМЕР:

border-style: dotted groove