padding

Внутренний отступ, от края элемента до вложенного в него контента.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство padding — или внутренний отступ — позволяет оттолкнуть контент от границ родительского элемента.

Само свойство padding это шорткат, позволяющий задать отступы сразу со всех четырёх сторон.

Можно управлять отступами по отдельности при помощи свойств padding-top, padding-left, padding-right, padding-bottom.

Или при помощи логических свойств padding-block, padding-block-start, padding-block-end, padding-inline, padding-inline-start, padding-inline-end.

Пример

Скопировано
        
          
          <div class="parent">  <p class="content">Сублимация, как бы это ни казалось парадоксальным, ...</p></div>
          <div class="parent">
  <p class="content">Сублимация, как бы это ни казалось парадоксальным, ...</p>
</div>

        
        
          
        
      

Для наглядности зададим фон родителю:

        
          
          .parent {  background-color: #2E9AFF;}
          .parent {
  background-color: #2E9AFF;
}

        
        
          
        
      
Открыть демо в новой вкладке

Текстовый контент, вложенный в блок с классом .parent, занимает всю площадь родителя и плотно прилегает к краям.

Попробуем добавить внутренний отступ — padding по 55 пикселей сверху и снизу и 40 пикселей по бокам:

        
          
          .parent {  background-color: #2E9AFF;  padding: 55px 40px;}
          .parent {
  background-color: #2E9AFF;
  padding: 55px 40px;
}

        
        
          
        
      
Открыть демо в новой вкладке

Почему в данном случае не следует задавать margin или padding для элемента с классом .content чтобы оттолкнуть его от краёв родителя? Потому что нужно стараться верстать максимально гибко с расчётом на изменения в дальнейшем.

Если задать отступы для блока .parent, то даже в случае изменения контента всегда останется отступ между краями блока и вложенным контентом.

А если задать отступ для элемента .content, а завтра его заменят на .content-2, то отступ пропадёт, и вёрстка потеряет свой исходный вид.

Как понять

Скопировано

Внутренние отступы являются частью блочной модели, а значит участвуют в расчёте конечного размера элемента.

Как пишется

Скопировано

Пишем свойство padding и через двоеточие после пробела указываем значение.

Значения можно указывать в любых относительных или абсолютных единицах измерения, доступных в вебе: px, em, rem, %, vh, vw и так далее. Также можно использовать функцию calc().

В качестве значения можно указать одно, два, три или четыре числа. Браузер будет читать это значение по-разному в зависимости от количества указанных значений.

  • padding: 10px 15px 20px 30px — читается по часовой стрелке начиная с верхней границы. Сверху 10 пикселей —> справа 15 пикселей —> снизу 20 пикселей —> слева 30 пикселей. Все вычисления в вебе начинаются от верхнего левого угла. Запомни этот порядок. Он часто нужен при чтении кода.
  • padding: 15px — со всех четырёх сторон будет одинаковый отступ в 15 пикселей.
  • padding: 15px 20px — парные противоположные отступы. Первое значение для верхнего и нижнего отступов: сверху и снизу по 15 пикселей. Второе значение для боковых отступов: справа и слева по 20 пикселей.
  • padding: 10px 5px 25px — первое значение для верхнего отступ (сверху 10 пикселей), второе значение для боковых отступов (справа и слева по 5 пикселей), последнее значение для нижнего отступа (снизу 25 пикселей).

Подсказки

Скопировано

💡 Свойство не наследуется.

💡 Значение по умолчанию — 0.

💡 Внутренний отступ не может быть отрицательным.

💡 Отступы можно анимировать при помощи свойства transition 🥳

💡 У вертикальных отступов нет проблемы схлопывания как у margin.

💡 У списков есть левый отступ по умолчанию. Не забывай его сбрасывать, если используешь списки только для группировки объектов.

Левый отступ по умолчанию у списков

💡 В инструментах разработчика в Chrome padding подсвечивается зелёным цветов. В Firefox при инспектировании элемента внутренний отступ обозначается светло-сиреневым цветом.

На практике

Скопировано

Егор Левченко советует

Скопировано

🛠 Чтобы понять padding представьте лист бумаги с напечатанным на принтере текстом. Видите эти отступы по краям листа? Они внутри и это тот самый padding! padding стоит использовать, чтобы указать отступы от краёв блока и навсегда отказаться от margin-top. Правильно задав границы, вы сможете упорядочить все прочие отступы у элементов внутри вашего блока.

Алёна Батицкая советует

Скопировано

🛠 Самая прикольная фишка, которую можно реализовать при помощи padding — адаптивные картинки, которые при изменении ширины экрана изменяют свой размер, но не деформируются.

        
          
          <!-- Элемент для трюка в padding --><div class="responsive image-box"></div><!-- Просто блок с фоновой картинкой --><div class="image-box"></div>
          <!-- Элемент для трюка в padding -->
<div class="responsive image-box"></div>

<!-- Просто блок с фоновой картинкой -->
<div class="image-box"></div>

        
        
          
        
      
        
          
          .image-box {  width: 100%;  /* Второй блок будет высотой 200 пикселей. Всегда */  height: 200px;  background: url("images/eyes.svg")    no-repeat center / contain;}.responsive {  /* Первому блоку задаём нулевую высоту */  height: 0;  /* Отталкиваем нижнюю границу при помощи внутреннего отступа */  padding-bottom: 56.25%;}
          .image-box {
  width: 100%;
  /* Второй блок будет высотой 200 пикселей. Всегда */
  height: 200px;
  background: url("images/eyes.svg")
    no-repeat center / contain;
}

.responsive {
  /* Первому блоку задаём нулевую высоту */
  height: 0;
  /* Отталкиваем нижнюю границу при помощи внутреннего отступа */
  padding-bottom: 56.25%;
}

        
        
          
        
      
Открыть демо в новой вкладке

🛠 Попробуй менять размеры окна браузера и понаблюдать за поведением обоих блоков. Первый будет всегда сохранять пропорции 16:9, а вот второй всегда будет высотой 200 пикселей.

Таблица значений padding-bottom для разных стандартных соотношений сторон:
Соотношение сторон padding-bottom
16:9 56.25%
4:3 75%
3:2 66.66%
8:5 62.5%