/css/padding:> Отступ коробки_

Свойство padding

Синтаксис

CSS 1
CSS 2‒2.2
padding: <ширина-отступа>{1,4} | inherit

<ширина-отступа> = <длина> | <процент>

Описание

Свойство padding (от англ. "padding" ‒ «набивка, отступ») является сокращённым свойством, которое определяет размер отступа для всех четырёх сторонpadding-top», «padding-right», «padding-bottom», «padding-left»).

Область отступа коробки
Область отступа коробки
Применяется: в CSS 1‒2.0 ко всем элементам;
в CSS 2.1‒2.2 ко всем элементам, кроме элементов групп строк таблицы, групп заголовков таблицы, группы колонтитула таблицы, строки таблицы, группы столбцов таблицы и столбцов таблицы;
Наследование: отсутствует;
Проценты: в CSS 1‒2.0 относительно ширины ближайшего предка блок-уровня;
в CSS 2.1‒2.2 относительно ширины содержательного блока;
Медиа: визуальные.

JavaScript

[объект].style.padding="[значение]";


Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация


Значения

<длина>
Определяет фиксированную ширину.
<процент>
Процентное значение вычисляется относительно ширины содержательного блока созданной коробки. Если ширина этого содержательного блока зависит от этого элемента, то компоновка не определена в CSS 2.1/2.2.
inherit
Указывает, что элемент должен унаследовать параметры родительского элемента.

Примечание: значения отступа не могут быть отрицательными.


Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство padding</title>
<style type="text/css">
.box {
display: inline-block;
font-size: 13pt;
}
.containing {
background-color: #d0d0d0;
padding: 2em 1.5em 1em 0.5em;
}
.padding {
background-color: white;
width: 15em;
height: 5em;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Отступ от содержимого коробки</h1>
<div class="box containing">
<div class="box padding">Содержимое коробки</div>
</div>
</body>
</html>
Свойство padding