CSS padding — внутрішні відступи елемента

Властивість padding - задає відступ навколо вмісту елемента (тобто, задає відстань між кордоном елемента та уявним прямокутником, котрий обмежує текст).

padding та ширина елемента

Якщо елемент має визначену ширину, будь-яке додавання відступів до нього збільшить його ширину. Це часто непотрібна поведінка, оскільки вона вимагає перерахування ширини елемента, а то й всього макету сторінки. Також така поведінка стосується і висоти елемента. Щоб розв'язувати цю проблему, таким чином щоб відступи не мали впливу на ширину елемента, ти можеш скористатися властивістю box-sizing. Задавши властивості box-sizing значення border-box ти помітиш, що елемент зберігає свою ширину, одночасно збільшуючи відступи, компенсуючи це доступним простором вмісту (область з текстом буде меншою), дивись другий приклад.

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

| Кількість значень | Поведінка властивості |

|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------|

| 1 | Відступи будуть встановлені для всіх сторін. |

| 2 | Перше значення встановить відступ зверху та знизу, друге - відступи праворуч та ліворуч. |

| 3 | Перше значення встановлює відступ зверху, друге значення одночасно,встановить лівий та правий відступи, третє значення - відступ знизу. |

| 4 | Послідовно встановить відступи для верхнього, правого, нижнього та лівого країв. |

Приклади:

• padding:10px 5px 15px 20px;

• поле звеpxу 10px

• поле справа 5px

• поле знизу 15px

• поле зліва 20px

• padding:10px 5px 15px;

• поле звеpxу 10px

• поля зліва та справа по 5px

• поле знизу 15px

• padding:10px 5px;

• поля звеpxу та знизу по 10px

• поля злыва та справа по 5px

• padding:10px;

• всі поля по 10px

Величину полів можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. При вказівці поля в відсотках, значення розраховується від ширини батьківського елемента.

правити

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

правити

Нотатка

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

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

Нотатка

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

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

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

Синтаксис

padding: length|initial|inherit;

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

length

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

автор: NagarD

правити

%

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

автор: NagarD

правити

initial

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

автор: NagarD

правити

inherit

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

автор: NagarD

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div class="box">При створенні відступів в 70 пікселів, ширина і довжина цього блоку збільшиться на 140 пікселів відповідно.</div>
<div class="inputs">
  <input id="2" name="padding" value="0" property="padding" type="radio"/>
  <label for="2">margin: 0</label>
  <br>
  <input id="1" name="padding" value="70px" property="padding" type="radio"/>
  <label for="1">margin: 70px</label>
  <br>
  <input id="3" name="padding" value="border-box" property="box-sizing" type="radio"/>
  <label for="3">box-sizing: border-box</label>
</div>

div {
  display: inline-block;
  margin-left: 3em;
}

.inputs {
  margin: 40px;
  float: right;
}

.box {
  margin: 0 auto;
  background-color: aquamarine;
  width: 300px; 
  height: 300px;
/*   padding: 70px; */
/*   box-sizing: border-box; */
}

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {
  var value = this.getAttribute('value');
  var property = this.getAttribute('property');
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('box-sizing', 'initial'));
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty(property, value));
}));

<p>Відступи: 2cm 4cm 3cm 4cm.</p>

p {
    padding: 2cm 4cm 3cm 4cm;
    border: 2px solid #0172ad;
    background: #eef6ff;
}

<div class="info">
	<p>За допомогою властивості <code>padding</code> ми можемо встановити поля для блоку на сторінці.</p>
	<p>Ви бачите три ідентичні блоки, але для них задані різні значення полів: <em>0px</em>, <em>4vh</em> й <em>6%</em> відповідно.</p>
</div>

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

* {
	box-sizing: border-box;
}

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

.info {
	padding: 8px 16px;
}

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

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 150px;
	height: 150px;
	background-color: gold;
	padding: 0;
}

.block.one {
	padding: 4vh;
}

.block.two {
	padding: 6%;
}

.content {
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,.45);
}

<div class="box">

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

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

<strong>padding: </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', val + 'px'));
}));

<div class="block block-3">
  <code>padding: 0;</code>
</div>
<div class="block block-1">
  <code>padding: 12px;</code>
</div>
<div class="block block-2">
  <code>padding: 16px 8px;</code>
</div>
<div class="block block-4">
  <code>padding: 25px 46px 36px 4px;</code>
</div>

.block {
  width: 350px;
  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: 12px;
}

.block-2 {
  padding: 16px 8px;
}

.block-3 {
  padding: 0;
}

.block-4 {
  padding: 25px 46px 36px 4px;
}

<figure>
    <p>Текст навколо, щоб було видно рядки.
       <span class="tag">рядкова мітка</span>
       і продовження абзацу, яке йде далі.</p>
    <figcaption>display: inline</figcaption>
</figure>

<figure>
    <p>Текст навколо, щоб було видно рядки.
       <span class="tag ib">блокова мітка</span>
       і продовження абзацу, яке йде далі.</p>
    <figcaption>display: inline-block</figcaption>
</figure>

figure {
    display: inline-block;
    width: 230px;
    margin: 0 24px 0 0;
    font: 13px/1.5 sans-serif;
    vertical-align: top;
}

figcaption {
    margin-top: 8px;
    font: 12px monospace;
    text-align: center;
}

figure p {
    margin: 0;
    padding: 6px;
    border: 1px solid #99aaaa;
}

.tag {
    padding: 8px 10px;
    background: #0172ad;
    color: #fff;
}

.ib {
    display: inline-block;
}