|
С помощью CSS для блочных элементов можно создавать границу вокруг различных элементов, отступы и поля.
Принцип расположения блочных элементов:
- Поле окружающее блок ( margin )
- Граница блока ( border )
- Отступ внутри блока ( padding )
| Свойство | Значение | Описание | Пример |
|---|
| padding-top | Отступы от границы элемента до его содержимого в единицах длины или процентах |
сверху | table{padding:10px} |
| padding-right | справа |
| padding-bottom | снизу |
| padding-left | слева |
| padding | со всех сторон |
| margin-top | Размеры полей в единицах длины или процентах |
сверху | p{margin-left:20px; margin-right:10px} |
| margin-right | справа |
| margin-bottom | снизу |
| margin-left | слева |
| margin | со всех сторон |
| border-top-width |
Ширина рамки в единицах длины или
thin (тонкая),
medium (средняя),
thick (толстая)
| сверху | p{border-top-width:7px} |
| border-right-width | справа |
| border-bottom-width | снизу |
| border-left-width | слева |
| border-width | со всех сторон |
| border-top-color | Значение цвета | Цвет рамки для границ |
p{border-color: red} |
| border-right-color |
| border-bottom-color |
| border-left-color |
| border-color |
| transperent |
| border-style |
none , dotted , dashed , solid , double , groove , ridge , inset ,
outset | Стиль рамки | table{border-style:double} |
| border-top | Ширина, стиль, цвет |
Определяют толщину, стиль и цвет границ рамки | table{border: solid 2px blue} |
| border-right |
| border-bottom |
| border-left |
| border |
| 