Свойство padding устанавливает отступ вовнутрь элемента. Свойства padding-top, padding-right, padding-bottom, padding-left устанавливают отступы сверху, справа, снизу, слева соответственно. Свойство padding является свойством-сокращением - позволяет одновременно установить отступ с различных сторон элемента.

По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px, то реальная ширина элемента будет 120px. А если мы зададим еще и border-left в 10px, то реальная ширина элемента станет 130px. То есть padding и border расширяют блок (и по ширине, и по высоте). Это поведение можно поменять с помощью box-sizing.

Синтаксис

селектор {
	padding: CSS единицы | проценты | inherit;
}

Значения для padding

Свойство-сокращение padding принимает 1, 2 или 4 параметра.

Свойства padding-top, padding-right, padding-bottom, padding-left принимают только один параметр.

Значение Описание
CSS единицы Устанавливает отступ в заданных единицах.
Проценты Отступ вычисляется в зависимости от ширины родительского элемента.
inherit Наследует значение родителя.

По умолчанию каждый браузер может добавлять элементам различные отступы (в разных браузерах могут быть разные отступы!). Используйте reset.css, чтобы обнулить их (или сделать одинаковые).

Количество параметров

Свойство-сокращение padding принимает 1, 2, 3 или 4 параметра.

Значение Описание
Одно число padding: 10px; Задает отступ со всех сторон элемента.
Два числа padding: 10px 20px; Первое число задает отступ сверху и снизу, а второе - справа и слева.
Три числа padding: 10px 20px 30px; Первое число задает отступ сверху, а второе - справа и слева, третье - снизу.
4 числа padding: 10px 20px 30px 40px; 10px сверху, 20px справа, 30px снизу, 40px слева. Таким образом первое число задает верх, и затем следует идти по часовой стрелке: верх, право, низ, лево.

Примеры

Пример

Сейчас отступ нулевой и текст будет прижат к границе блока:

#elem {
	padding: 0;
	border: 1px solid black;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Добавим отступ для текста со всех сторон в 20px:

#elem {
	padding: 20px;
	border: 1px solid black;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Сверху и снизу отступ будет 20px, а справа и слева - 5px:

#elem {
	padding: 20px 5px;
	border: 1px solid black;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Сверху 5px, справа - 15px, снизу - 25px, слева - 35px:

#elem {
	padding: 5px 15px 25px 35px;
	border: 1px solid black;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Сверху 5px, справа - 15px, снизу - 25px, слева - 35px:

#elem {
	padding-top: 5px;
	padding-right:15px;
	padding-bottom:25px; 
	padding-left:35px;
	border: 1px solid black;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.