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

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

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

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

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

правити

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

правити

Нотатка

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

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

Нотатка

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

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

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

Синтаксис

padding-top: length|initial|inherit;

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

length

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

%

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

автор: 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-top: 2cm;
}

<p>Без padding-top у батька: відступ абзацу виштовхує весь блок, і жовте тло починається нижче.</p>
<div class="box">
  <p>Абзац із margin-top: 30px</p>
</div>

<p>Із padding-top: 1px відступ лишається всередині блока.</p>
<div class="box fix">
  <p>Той самий абзац із margin-top: 30px</p>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
}

.box {
    background: gold;
    border: 1px solid #333;
    margin-bottom: 24px;
}

.box p {
    margin: 30px 10px;
}

.fix {
    padding-top: 1px;
}

<div class="box">

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

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

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

<div class="info">
	<p>За допомогою властивості <code>padding-top</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-top: 25px;
	background-color: gold;
	font-size: .8em;
	text-align: center;
	line-height: 75px;
}

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

<div class="block block-1">
  <code>padding-top: 12px;</code>
</div>
<div class="block block-2">
  <code>padding-top: 5%;</code>
</div>
<div class="block block-3">
  <code>padding-top: 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-top: 12px;
}

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

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