CSS padding-bottom — внутрішній відступ знизу

Властивість padding-bottom встановлює значення поля від нижнього краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст.

Ви також можете використовувати властивість padding для скороченого запису padding-top, padding-right, padding-bottom і padding-left.

Якщо елемент має вказану ширину, будь-яке додавання до цього елемента полів, буде збільшувати його загальну ширину, що часто є небажаним результатом.

Щоб вирішити цю проблему, зберігаючи встановлену ширину елемента, незалежно від розміру полів, ви можете скористатись властивістю box-sizing.

правити

Загальний опис

правити

Нотатка

Від'ємні значення не допускаються.

автор: Svitlana правити

Нотатка

CSS3 пропонує прибрати можливість використання в якості значень процентів, а також додати від'ємні значення, так само як і ключове слово auto.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

padding-left: length|initial|inherit;

Властивість padding-bottom може отримувати 4 значень:

length

Встановлює відстань поля у px, pt, cm та інших одиниця, що прийняті в CSS.

автор: Svitlana

правити

%

Встановлює відступ у відсотках відносно ширини елементу.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p class="pad">Абзац із відступом 2см знизу.</p>
<p>Звичайний абзац.</p>

p {
    border: 1px solid #0172ad;
    background: #eef6ff;
}

.pad {
    padding-bottom: 2cm;
}

<div class="wrap w1">
    <div class="inner">ширина 300px → поле 150px</div>
</div>

<div class="wrap w2">
    <div class="inner">ширина 160px → поле 80px</div>
</div>

body {
    font-family: sans-serif;
    font-size: 14px;
    padding: 20px;
}

.wrap {
    margin-bottom: 16px;
    border: 1px solid #cfd4d9;
}

.w1 {
    width: 300px;
}

.w2 {
    width: 160px;
}

.inner {
    padding-bottom: 50%;
    background: #b6e3f4;
}

<div class="box">

<div class="child">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>padding-bottom</strong>.</p>

<p>Вона встановлює значення для нижнього поля елемента на сторінці.</p>

<strong>padding-bottom: </strong>
<input type="number" class="input" id="val" value="8">px<strong>;</strong>
</div>
  
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
}

.box {
  background-color: #f7f7f7;
  border: 8px solid #F74C32;
  padding: 8px 8px 8px 8px;
  transition: padding .15s ease-in;
}

.child {
  padding: 4px;
  background-color: gold;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var val = document.querySelector('#val').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('padding-bottom', val + 'px'));
}));

<div class="info">
	<p>За допомогою властивості <code>padding-bottom</code> ми можемо встановити нижнє поле для елементу.</p>
	<p>Нижче розташований блок (темного кольору), для якого, відносно бітьківсього елементу (він має жовтий фон), ми й додаємо нижнє поле (в даному прикладі - <em>25px</em>).</p>
</div>

<div class="wrapper">
	<div class="block"><div class="content"></div></div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
}

.info {
	padding: 6px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	background-color: #ddd;
	border: 2px solid #666;
	/*height: 150px;*/
	overflow: hidden;
}

.block {
	padding-bottom: 25px;
	background-color: gold;
	font-size: .8em;
	text-align: center;
	line-height: 75px;
}

.content {
	width: 100%;
	height: 100px;
	background-color: #666;
}

<div class="block block-1">
  <code>padding-bottom: 12px;</code>
</div>
<div class="block block-2">
  <code>padding-bottom: 5%;</code>
</div>
<div class="block block-3">
  <code>padding-bottom: 0;</code>
</div>

.block {
  width: 250px;
  height: 150px;
  background-color: #eee;
  border: 2px solid #666;
  margin-bottom: 18px;
  text-align: center;
  line-height: 150px;
}

.block > code {
  background-color: grey;
  display: block;
}

.block-1 {
  padding-bottom: 12px;
}

.block-2 {
  padding-bottom: 5%;
}

.block-3 {
  padding-bottom: 0;
}