Свойство padding стиля

Определение и использование

padding Атрибут устанавливает или возвращает внутренние отступы элемента.

Этот атрибут может принимать от одного до четырех значений:

атрибут margin и атрибут padding Всегда вставляют пространство вокруг элемента. Однако, разница заключается в том, что margin вставляет пространство вокруг рамки, а padding - внутри рамки элемента.

  • Одно значение, например: div {padding: 50px} - все четыре стороны будут иметь внутренние отступы 50px
  • Два значения, например: div {padding: 50px 10px} - верхние и нижние внутренние отступы будут 50px, а левые и правые внутренние отступы будут 10px
  • Три значения, например: div {padding: 50px 10px 20px} - верхний внутренний отступ 50px, левый и правый внутренние отступы 10px, нижний внутренний отступ 20px
  • Четыре значения, например: div {padding: 50px 10px 20px 30px} - верхний внутренний отступ 50px, правый внутренний отступ 10px, нижний внутренний отступ 20px, левый внутренний отступ 30px

См. также:

Урок CSS:Внутренний отступ CSS

Руководство CSS:атрибут padding

Пример

Пример 1

Установить внутренний отступ элемента <div>:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

Попробуйте сами

Пример 2

Изменить все четыре стороны внутреннего отступа элемента <div> на "25px":

document.getElementById("myDiv").style.padding = "25px";

Попробуйте сами

Пример 3

Возврат внутреннего отступа элемента <div>:

alert(document.getElementById("myDiv").style.padding);

Попробуйте сами

Пример 4

Разница между свойствами margin и padding:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Попробуйте сами

Синтаксис

Возврат атрибута padding:

object.style.padding

Установка атрибута padding:

object.style.padding = "%|length|initial|inherit"

Значение атрибута

Значение Описание
% Определение внутреннего отступа в процентах от ширины родительского элемента.
length Определение внутреннего отступа с помощью единицы измерения длины.
initial Установите этот атрибут в его значение по умолчанию. См. initial.
inherit Инherits этот атрибут от родительского элемента. См. inherit.

Технические детали

по умолчанию: 0
возвратное значение: строка, представляющая внутренний отступ элемента.
версия CSS: CSS1

браузер поддерживает

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка