padding
Внутренний отступ, от края элемента до вложенного в него контента.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Егор Левченко ,
- Светлана Коробцева
Обновлено 8 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство 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>
Для наглядности зададим фон родителю:
.parent background-color: #2E9AFF;>.parent background-color: #2E9AFF; >
�� Попробуй менять размеры окна браузера и понаблюдать за поведением обоих блоков. Первый будет всегда сохранять пропорции 16:9, а вот второй всегда будет высотой 200 пикселей.
Таблица значений padding-bottom для разных стандартных соотношений сторон:
| Соотношение сторон | padding-bottom |
|---|---|
| 16:9 | 56.25% |
| 4:3 | 75% |
| 3:2 | 66.66% |
| 8:5 | 62.5% |
Свойство padding
Свойство padding устанавливает внутренний отступ элемента. Значением свойства служат любые единицы для размеров. По умолчанию каждый браузер может добавлять элементам различные отступы. Свойство является сокращением для свойств padding-top , padding-right , padding-bottom , padding-left .
Синтаксис
Количество параметров
Свойство padding принимает 1 , 2 , 3 или 4 значения, перечисляемые через пробел:
| Количество | Описание |
|---|---|
| 1 | Одно значение задает отступ со всех сторон элемента. |
| 2 | Первое значение задает отступ сверху и снизу, а второе — справа и слева. |
| 3 | Первое значение задает отступ сверху, второе — справа и слева, а третье — снизу. |
| 4 | Первое значение задает отступ сверху, второе — справа, третье — снизу, а четвертое — слева. |
Пример
В данном случае по умолчанию внутренний отступ будет нулевой и текст будет прижат к границе блока:
#elem < padding: 0; width: 300px; border: 1px solid black; text-align: justify; >
Пример
А теперь давайте сделаем внутренний отступ в 30px :
#elem < padding: 30px; width: 300px; border: 1px solid black; text-align: justify; >
Пример
Сейчас отступ сверху и снизу будет 20px , а справа и слева — 5px :
#elem < padding: 20px 5px; width: 300px; border: 1px solid black; text-align: justify; >
Пример
Сейчас отступ сверху 5px , справа — 15px , снизу — 25px , слева — 35px :
#elem < padding: 5px 15px 25px 35px; width: 300px; border: 1px solid black; text-align: justify; >
Смотрите также
- свойство margin ,
которое задает внешний отступ
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 одиницях. При вказівці поля в відсотках, значення розраховується від ширини батьківського елемента.
Від’ємні значення не допускаються.
CSS3 пропонує прибрати можливість використання в якості значень процентів, а також додати від’ємні значення, так само як і ключове слово auto .
Свойство padding
Сокращенная запись для определения внутреннего отступа у элемента. Включает в себя свойства padding-top, padding-right, padding-bottom, padding-left.
padding: 15px 20px 15px 20px;Пошаговый план! Как быстро научиться создавать сайты!
iOS Safari
Значения
Убирает все внутренние отступы у элемента
padding: 10px;
Используя один параметр. Задает внутренний отступ со всех сторон
.example-1
Содержимое блока
padding: 10px 20px;
Используя два параметра. Первый — внутренний отступ сверху и снизу, второй — внутренний отступ слева и справа
.example-2
Содержимое блока
padding: 15px 25px 25px;
Используя три параметра. Первый — внутренний отступ сверху, второй — внутренний отступ справа и слева, третий — внутренний отступ снизу
.example-3
Содержимое блока
padding: 10px 15px 10px 25px;
Используя четыре параметра. Первый — внутренний отступ сверху, второй — внутренний справа, третий — внутренний отступ снизу, четвертый — внутренний отступ слева
.example-4
Предыдущая запись