Границы и отступы - CSS свойства
Краткое описание свойств
border-width- Задаёт толщину рамки.
border-style- Задаёт стиль рамки.
border-color- Задаёт цвет рамки.
border- Общее свойство для задания рамки вокруг объекта.
border-top- Задаёт сразу все параметры (толщина, стиль и цвет) верхней границы.
border-bottom- Задаёт сразу все параметры (толщина, стиль и цвет) нижней границы.
border-right- Задаёт сразу все параметры (толщина, стиль и цвет) правой границы.
border-left- Задаёт сразу все параметры (толщина, стиль и цвет) левой границы.
border-radius- Задаёт радиус скругления углов рамки.
outline-width- Задаёт толщину плавающей рамки.
outline-style- Задаёт стиль плавающей рамки.
outline-color- Задаёт цвет плавающей рамки.
outline- Общее свойство для задания плавающей рамки вокруг объекта.
outline-offset- Задаёт расстояние между плавающей рамкой и краем блока.
margin- Задаёт отступ от каждого края элемента.
padding- Задаёт поля элемента.
Свойство border-width
Задаёт толщину рамки.
Краткая информация
| Значение по умолчанию | medium |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | borderWidth |
Значения
Можно использовать любое числовое значение или ключевое слово:
thin- 2px.medium- 4px.thick- 6px.
Можно задавать от одного до четырёх значений через пробел:
- 1 значение - задаёт толщину всех четырёх границ.
- 2 значения - первое значение задаёт толщину верхней и нижней границ, второе - правой и левой границ.
- 3 значения - первое значение задаёт толщину верхней границы, второе - правой и левой границ, третье - нижней границы.
- 4 значения - первое значение задаёт толщину верхней границы, второе - правой границы, третье - нижней границы, четвёртое - левой границы.
Свойство border-style
Задаёт стиль рамки.
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | borderStyle |
Значения
none - не отображать рамку.
Доступные стили:
| Значение | Вид |
|---|---|
solid |
|
double |
|
dotted |
|
dashed |
|
groove |
|
ridge |
|
inset |
|
outset |
Чтобы спрятать рамку, используется значение hidden. В отличие от none, оно не вызывает проблем при отображении таблиц.
Можно задавать от одного до четырёх значений через пробел:
- 1 значение - задаёт стиль всех четырёх границ.
- 2 значения - первое значение задаёт стиль верхней и нижней границ, второе - правой и левой границ.
- 3 значения - первое значение задаёт стиль верхней границы, второе - правой и левой границ, третье - нижней границы.
- 4 значения - первое значение задаёт стиль верхней границы, второе - правой границы, третье - нижней границы, четвёртое - левой границы.
Свойство border-color
Используется для задания цвета рамки.
Краткая информация
| Значение по умолчанию | из свойства color |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | borderColor |
Значения
Допускается любой вариант задания цвета.
Можно задавать от одного до четырёх значений через пробел:
- 1 значение - задаёт цвет всех четырёх границ.
- 2 значения - первое значение задаёт цвет верхней и нижней границ, второе - правой и левой границ.
- 3 значения - первое значение задаёт цвет верхней границы, второе - правой и левой границ, третье - нижней границы.
- 4 значения - первое значение задаёт цвет верхней границы, второе - правой границы, третье - нижней границы, четвёртое - левой границы.
Свойство border
Общее свойство для задания рамки вокруг объекта, в котором сразу указываются толщина, стиль и цвет рамки.
Краткая информация
| Значение по умолчанию | зависит от индивидуальных свойств |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | border |
Значения
Параметры могут идти в любом порядке через пробел.
Свойства border-top, border-bottom, border-right, border-left
Свойства для задания одновременно всех параметров (толщина, стиль и цвет) верхней, нижней, правой или левой границы соответственно.
Краткая информация
| Значение по умолчанию | зависит от индивидуальных свойств |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | borderTop, borderBottom, borderRight, borderLeft |
Значения
Параметры могут идти в любом порядке через пробел.
Свойство border-radius
Задаёт радиус скругления углов рамки.
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | borderRadius |
Значения
Можно использовать любое числовое значение.
Можно задавать от одного до четырёх значений через пробел:
- 1 значение - задаёт радиус для всех четырёх углов.
- 2 значения - первое значение задаёт радиус верхнего левого и нижнего правого угла, второе - нижнего левого и верхнего правого угла.
- 3 значения - первое значение задаёт радиус верхнего левого угла, второе - нижнего левого и верхнего правого угла, третье - нижнего правого угла.
- 4 значения - первое значение задаёт радиус верхнего левого угла, второе - верхнего правого угла, третье - нижнего правого угла, четвёртое - нижнего левого угла.
Свойство outline-width
Задаёт толщину плавающей рамки.
Краткая информация
| Значение по умолчанию | medium |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | outlineWidth |
Значения
Можно использовать любое числовое значение или ключевое слово:
thin- 2px.medium- 4px.thick- 6px.
В отличие от свойства border-width нельзя задавать отдельно для границ.
Свойство outline-style
Задаёт стиль плавающей рамки.
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | outlineStyle |
Значения
Доступные стили:
| Значение | Вид |
|---|---|
solid |
|
double |
|
dotted |
|
dashed |
|
groove |
|
ridge |
|
inset |
|
outset |
Значение none используется, чтобы спрятать рамку.
В отличие от свойства border-style нельзя задавать отдельно для границ.
Свойство outline-color
Используется для задания цвета плавающей рамки.
Краткая информация
| Значение по умолчанию | invert |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | outlineColor |
Значения
Допускается любой вариант задания цвета.
Значение invert автоматически подбирает подходящий цвет для лучшего контраста с фоном.
В отличие от свойства border-color нельзя задавать отдельно для границ.
Свойство outline
Общее свойство для задания плавающей рамки вокруг объекта, в котором сразу указываются толщина, стиль и цвет рамки.
Краткая информация
| Значение по умолчанию | зависит от индивидуальных свойств |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | outline |
Значения
Параметры могут идти в любом порядке через пробел.
Примечания
Плавающая рамка не влияет на размеры блока.
Свойство outline-offset
Задаёт расстояние между плавающей рамкой и краем блока.
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | outlineOffset |
Значения
Можно использовать любое числовое значение. Отрицательные значения отображают рамку внутри блока, положительные - вокруг блока.
Свойство margin
Задаёт отступ от каждого края элемента. Отступ - это расстояние от края элемента до края его родительского элемента или соседнего элемента. Отступы не являются частью элемента.
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | margin |
Значения
Для задания используется любое числовое значение.
Можно задавать от одного до четырёх значений через пробел:
- 1 значение - задаёт отступ со всех четырёх сторон.
- 2 значения - первое значение задаёт отступ от верхнего и нижнего края, второе - от правого и левого края.
- 3 значения - первое значение задаёт отступ от верхнего края, второе - от правого и левого края, третье - от нижнего края.
- 4 значения - первое значение задаёт отступ от верхнего края, второе - от правого края, третье - от нижнего края, четвёртое - от левого края.
Свойство padding
Задаёт поля элемента. Поля - это расстояние от непосредственного содержимого элемента до его краёв. Поля являются частью элемента.
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Применяется | ко всем элементам |
| Наследуется | нет |
| Имя свойства в DOM | padding |
Значения
Для задания используется любое числовое значение.
Можно задавать от одного до четырёх значений через пробел:
- 1 значение - задаёт поля со всех четырёх сторон.
- 2 значения - первое значение задаёт поля от верхнего и нижнего края, второе - от правого и левого края.
- 3 значения - первое значение задаёт поле от верхнего края, второе - от правого и левого края, третье - от нижнего края.
- 4 значения - первое значение задаёт поле от верхнего края, второе - от правого края, третье - от нижнего края, четвёртое - от левого края.