CSS :: Свойство padding-right

css-свойство padding-right (от англ. right 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.paddingRight="value".

Синтаксис

padding-right: [<размер> | <проценты>]

Значения

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/box.html#propdef-padding-right

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/padding-right

Примеры

HTML Результат

htmlCodes

<!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 Результат

htmlCodes

<!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