CSS padding, примеры. Как сделать внутренний отступ в html

Свойство CSS padding отвечает за задание отступов внутри элемента от его границы

Синтаксис CSS padding

padding: top right bottom left;

Где:

top - отступ от верхней границы элемента;
right - отступ от правой границы элемента;
bottom - отступ от нижней границы элемента;
left - отступ от левой границы элемента;

Значения чаще всего задаются в пикселях. Допускается также задание в виде процентов и других допустимых единицах CSS.

Примечание 1
Допускается задание не четырех значений. В зависимости от количества значений действия будут разные:

Если задано 3 значения, то первое значение устанавливает отступ сверху, второе — одновременно слева и справа, а третье — снизу
Если задано 2 значения, то первое значение устанавливает отступ сверху и снизу, второе — слева и справа от содержимого
Если задано 1 значение, то отступ задается одинаковый отступ для всех сторон. Например:

padding: 10px 10px 10px 10px;
Можно задать компактнее:
padding: 10px;

Примечание 2
В отличии от свойства CSS margin, отрицательные значения у padding не допустимы.

Также у padding есть 4 отдельных свойства CSS. Каждое из них отвечает за какое-то направление.

padding-left - отступ от левой границы элемента;
padding-right - отступ от правой границы элемента;
padding-top - отступ от верхней границы элемента;
padding-bottom - отступ от левой границы элемента;

Например

padding: 3px 5px 7px 10px;
Или можно задать подробно:
padding-left: 10px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 7px;

Примеры с разными отступами внутри элемента

Пример 1. Отступ текста внутри тега <div>

<html>
<head>
<style>
	.padding1{
	width: 250px;
	height: auto;
	border: 1px dotted #1E90FF;
	padding: 0px;
	}
	.padding2{
	width: 250px;
	height: auto;
	border: 1px dotted #1E90FF;
	padding: 10px;
	}
	.padding3{
	width: 250px;
	height: auto;
	border: 1px dotted #1E90FF;
	padding: 10px 0px 0px 30px;
	}
</style>
</head>
<body>
	<div class="primer1">Пример с нулевыми отступам (padding: 0px)</div> 
	<div class="primer2">Пример с одинаковым отступом от всех границ (padding: 10px)</div> 
	<div class="primer3">Пример с разными отступам (padding: 10px 0px 0px 30px)</div> 
</body>
</html>

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта

<html>
<head>
<style>
	.padding4{
	width: 200px;
	height: 150px;
	border: 1px dotted #1E90FF;
	padding: 10px 0px 0px 60px;
	background: #2323AA;
	}
	.padding4 .block{
	width: 100px;
	height: 80px;
	background: #fff;
	border: 1px dotted #bbb;
	}
</style>
</head>
<body>
	<div class="padding4">
		<div class="block"></div>
	</div> 
</body>
</html>

Для обращения к padding из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.padding="VALUE"

← Перейти в каталог CSS уроков