CSS padding-left — внутрішній відступ ліворуч

Властивість padding-left встановлює внутрішній відступ ліворуч.

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

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

правити

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

правити

Нотатка

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

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

Нотатка

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

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

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

Синтаксис

padding-left: length|initial|inherit;

Властивість padding-left може отримувати 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-left: 2cm;
}

<div class="wrap">
  <div class="box">width: 300px + padding-left: 40px</div>
  <div class="box border-box">те саме, але box-sizing: border-box</div>
</div>

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

.wrap {
  width: 300px;
  background: #e6e6e6;
  padding: 8px 0;
}

.box {
  width: 300px;
  padding-left: 40px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: #bfd8ff;
  margin-bottom: 8px;
}

.border-box {
  box-sizing: border-box;
}

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

<div class="wrapper">
	<div class="block">
    <div class="content">
      padding-left - встановлює значення поля від лівого краю вмісту елемента. 
    </div>
  </div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 19px;
  text-align: center;
}

.info {
	padding: 6px;
}

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

.wrapper {
	background-color: #ddd;
	border: 2px solid #666;
}

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

.content {
	background-color: #666;
}

<div class="info">
	<p>За допомогою властивості <code>padding-left</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;
}

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

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

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