Свойство padding
Пример
Установите свойство padding для элемента <div>:
document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
Попробуйте сами »
Описание padding
Свойство padding устанавливает или возвращает отступ элемента.
Это свойство может принимать от одного до четырех значений:
Как свойство margin, так и свойство padding вставляют пространство вокруг элемента. Однако разница в том, что margin вставляет пространство вокруг границы, а padding вставляет пространство внутри границы элемента.
- Одно значение, например: div {padding: 50px} - все четыре стороны будут иметь отступ 50px
- Два значения, например: div {padding: 50px 10px} - верхний и нижний отступы будут 50 пикселей, левый и правый отступы будут 10 пикселей
- Три значение, например: div {padding: 50px 10px 20px} - верхний отступ будет 50 пикселей, левый и правый отступ будут 10 пикселей, нижний отступ будет 20 пикселей
- Четвёртое значение, например: div {padding: 50px 10px 20px 30px} - верхний отступ будет 50px, правый отступ будет 10px, нижний отступ будет 20px, левый отступ будет 30px
Поддержка padding
| Свойство | |||||
|---|---|---|---|---|---|
| padding | Да | Да | Да | Да | Да |
Синтаксис padding
Вернуть свойство padding:
object.style.padding
Установите свойство padding:
object.style.padding = "%|length|initial|inherit"
Значение свойства padding
| Значение | Описание |
|---|---|
| % | Определяет отступ в % от ширины родительского элемента |
| length | Определяет отступ в единицах длины |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали padding
| Значение по умолчанию: | 0 |
|---|---|
| Возвращаемое значение: | Строка, представляющая заполнение элемента. |
| CSS Версия | CSS1 |
Ещё примеры padding
Измените отступы всех четырех сторон элемента <div> на "25px":
document.getElementById("myDiv").style.padding = "25px";
Попробуйте сами »
Вернуть свойство padding элемента<div>:
alert(document.getElementById("myDiv").style.padding);
Попробуйте сами »
Разница между свойством margin и padding:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Попробуйте сами »
Связанные страницы padding
CSS Учебник: CSS Отступы
CSS Справочник: CSS Свойство