Свойство заполнения CSS
Пример
Установите отступ для всех четырех сторон элемента <p> на 35 пикселей:
p {
padding: 35px;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Отступ элемента — это пространство между его содержимым и его границей.
Свойство paddingявляется сокращенным свойством для:
Примечание: Padding создает дополнительное пространство внутри элемента, а margin создает дополнительное пространство вокруг элемента.
Это свойство может иметь от одного до четырех значений.
Если свойство padding имеет четыре значения:
- отступы: 10 пикселей 5 пикселей 15 пикселей 20 пикселей;
- верхний отступ 10px
- правый отступ 5px
- нижний отступ 15px
- левый отступ 20px
Если свойство padding имеет три значения:
- отступ: 10 пикселей 5 пикселей 15 пикселей;
- верхний отступ 10px
- правое и левое заполнение 5px
- нижний отступ 15px
Если свойство padding имеет два значения:
- отступ: 10 пикселей 5 пикселей;
- верхний и нижний отступы 10px
- правое и левое заполнение 5px
Если свойство padding имеет одно значение:
- отступ: 10 пикселей;
- все четыре отступа 10px
Примечание. Отрицательные значения не допускаются.
| Значение по умолчанию: | 0 |
|---|---|
| Унаследовано: | нет |
| Анимация: | да, см. отдельные свойства . Читать об анимации |
| Версия: | CSS1 |
| Синтаксис JavaScript: | объект .style.padding="100px 20px" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
| Property | |||||
|---|---|---|---|---|---|
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Синтаксис CSS
padding: length|initial|inherit;
Значения свойств
| Value | Description | Play it |
|---|---|---|
| length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | |
| % | Specifies the padding in percent of the width of the containing element | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Установите отступ для элемента <p> на 35 пикселей сверху и снизу и на 70 пикселей справа и слева:
p {
padding: 35px 70px;
}
Пример
Установите отступ для элемента <p> на 35 пикселей вверху, 70 пикселей справа и слева и 50 пикселей внизу:
p {
padding: 35px 70px 50px;
}
Пример
Установите отступ для элемента <p> на 35 пикселей вверху, 70 пикселей справа, 50 пикселей внизу и 90 пикселей слева:
p {
padding: 35px 70px 50px 90px;
}
Связанные страницы
Учебное пособие по CSS: отступы CSS
Учебное пособие по CSS: блочная модель CSS
Справочник по HTML DOM: свойство заполнения