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

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

Синтаксис

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

Значения

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

Ссылки

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

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

Примеры

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