padding | Справочник CSS
http://belarusweb.net
Основы создания сайтов

padding

Описание

Сокращенное css-свойство padding (от англ. paddingотбивка) используется для установки внутренних отступов (отбивки) элемента в одном объявлении, позволяя задавать отступы (отбивку) как для отдельных, так и сразу для всех сторон элемента.

Под внутренним отступом элемента подразумевается расстояние от внутренней стороны линии границы текущего элемента до соответствующей воображаемой стороны прямоугольника, ограничивающего содержимое элемента (см. рис. №1).

Рис №1. Общая схема элемента

Следует отметить, что внутренние отступы влияют на размеры самого элемента, являясь частью его конструкции, в отличие от внешних отступов, которые элементу не принадлежат и на его размеры не влияют.

По умолчанию браузеры могут устанавливать для различных элементов ненулевые внутренние отступы. Однако их можно легко обнулить, использовав в таблице стилей универсальный селектор и значение padding равное нулю.

Характеристики

  • Значение по умолчанию: 0.
  • Применяется: ко всем элементам, кроме элементов, для которых свойство display имеет одно из значений: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column.
  • Наследуется: нет.
  • Анимируется: да.
  • JavaScript: object.style.padding="value".

Синтаксис

padding: [<размер> | <проценты>] {1,4}

Значения

  • размер – принимаются любые единицы измерения (смотреть), используемые в CSS. Разрешаются только положительные значения.
  • проценты – величина внутреннего отступа в процентах, которые рассчитываются относительно ширины области содержимого родительского элемента. Разрешаются только положительные значения.

При этом разрешается указывать через пробел одно, два, три или четыре значения:

  • одно значение – внутренние отступы задаются для всех четырех сторон элемента;
  • два значения – первое значение задает внутренние отступы для верхней и нижней сторон элемента, второе – правой и левой;
  • три значения – первое значение задает внутренние отступы для верхней стороны элемента, второе – для правой и левой, третье – для нижней стороны элемента;
  • четыре значения – внутренние отступы устанавливается по часовой стрелке: для верхней стороны, затем правой, нижней и левой.

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		/* Прием предварительного обнуления */
		/* всех отступов у всех элементов */		
		*{
		margin: 0;		  
		padding: 0;		  
		outline: 0;		  
		}

		p{
		width: 500px;
		border: solid 2px green;
		}

		/* Внешние и внутренние отступы в одном объявлении */
		.all_in_one{
		margin: 50px 0px 50px 100px;
		padding: 20px 10px 20px 10px;
		}		

		/* Внешние и внутренние отступы по отдельности */
		.separate{
		margin-top: 50px;
		margin-right: 0px;        
		margin-bottom: 50px;		
		margin-left: 100px;
		padding-top: 20px;
		padding-right: 10px;        
		padding-bottom: 20px;		
		padding-left: 10px;
		}
	 
	</style>
	
</head>
<body>
	<p class="all_in_one">
		Внешние и внутренние отступы в одном объявлении<br>
		margin: 50px 0px 50px 100px;<br>
		padding: 20px 10px 20px 10px;        
	</p>

	<p class="separate">
		Тоже самое, но по отдельности<br>
		margin-top: 50px;<br>
		margin-right: 0px;<br>        
		margin-bottom: 50px;<br>		
		margin-left: 100px;<br><br>

		padding-top: 20px;<br>
		padding-right: 10px;<br>        
		padding-bottom: 20px;<br>		
		padding-left: 10px;        
	</p>	
</body>
</html>

Пример №1

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №2</title>

	<style>
		p{
		width: 500px;
		border: solid 2px green;
		}

		/* Отступы в процентах в одном объявлении */
		.all_in_one{
		margin: 10%;
		padding: 5%;
		}		

		/* Отступы в процентах по отдельности */
		.separate{
		margin-top: 10%;
		margin-right: 10%;        
		margin-bottom: 10%;		
		margin-left: 10%;
		padding-top: 5%;
		padding-right: 5%;        
		padding-bottom: 5%;		
		padding-left: 5%;
		}
	 
	</style>
	
</head>
<body>
	<p class="all_in_one">
		Отступы в процентах в одном объявлении<br>
		margin: 10%;<br>
		padding: 5%;        
	</p>

	<p class="separate">
		Тоже самое, но по отдельности<br>
		margin-top: 10%;<br>
		margin-right: 10%;<br>        
		margin-bottom: 10%;<br>		
		margin-left: 10%;<br><br>

		padding-top: 5%;<br>
		padding-right: 5%;<br>        
		padding-bottom: 5%;<br>		
		padding-left: 5%;        
	</p>	
</body>
</html>

Пример №2