Свойство 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 ,
которое задает внешний отступ
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 задаёт расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока (рис. 1).
Основное предназначение padding — создать пустое пространство вокруг содержимого элемента, например текста, чтобы он не прилегал плотно к краю элемента. Использование padding повышает читабельность текста и улучшает внешний вид страницы. В примере 1 показано применение padding для оформления текста.
Пример 1. Использование padding
Результат данного примера показан на рис. 2.
Рис. 2. Поля вокруг текста
Ячейки таблицы
td, th
Значения padding
padding достаточно универсальное свойство и у него может быть от одного до четырёх значений. Это нужно, чтобы одновременно задавать поля на разных сторонах элемента.
Одно значение — определяет поля для всех сторон блока.
padding: все стороны; padding: 10px;Два значения — первое определяет поля сверху и снизу для элемента, второе слева и справа для элемента.
padding: верх-низ лево-право; padding: 10px 20px;Три значения — первое задаёт поле сверху для элемента, второе одновременно слева и справа, а третье снизу.
padding: верх лево-право низ; padding: 10px 20px 5px;Четыре значения — первое определяет поле сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.
padding: верх право низ лево; padding: 5px 10px 15px 20px;В качестве единиц обычно используются пиксели, em, rem и др.
padding не допускает отрицательного значения, если вы указали его по ошибке, оно будет проигнорировано.
Проценты
В качестве значения padding можно использовать процентную запись, с которой связаны некоторые хитрости.
- По горизонтали проценты считаются от ширины всего блока.
- По вертикали проценты считаются от ширины всего блока.
Заметьте, что padding берётся от ширины всего блока, даже для поля сверху и снизу. Это связано с тем, что ширина блока ограничена шириной окна браузера, а высота зависит от содержимого элемента и может меняться в широких пределах.
Проценты можно сочетать с фиксированными значениями, получится что-то вроде этого.
padding: 10px 5%;Сопутствующие свойства
Наряду с padding используются свойства padding-top, padding-right, padding-bottom, padding-left, которые, соответственно, задают значения сверху, справа, снизу и слева. Эти свойства применяются, когда требуется задать поле с одной-двух сторон или когда не следует затрагивать уже выставленное значение padding . В примере 2 показано создание маркированного списка. Расстояние от маркера до текста меняется с помощью свойства padding-left .
Пример 2. Маркированный список
Результат данного примера показан на рис. 3.
Цвет фона
Свойство padding определяет пространство от границ до содержимого блока и это пространство заполняется фоновым цветом, заданным для всего блока. Данную особенность можно использовать для создания различных рамок. Так, если установить для фоновый цвет, то он не будет виден, поскольку картинка его закрывает. Но если добавить padding , то фон расширится и тем самым мы получим одноцветную рамку вокруг изображения. Комбинируя padding и border можно создавать разные рамки, как показано в примере 3.
Пример 3. Рамка вокруг изображения
Результат данного примера показан на рис. 4.
Рис. 4. Рамка, созданная с помощью padding
Учтите, что этот способ подходит для изображений без прозрачных участков, иначе через «дыры» будет виден фоновый цвет.
Аналогичным образом делаются рамки и для блоков, но внутрь блока следует добавить , для которого ставится фоновый цвет. Тем самым можно получить не только одноцветные рамки, но и градиентные, как показано в примере 4.
Пример 4. Градиентная рамка
Результат данного примера показан на рис. 5.
Рис. 5. Градиентная рамка, созданная с помощью padding
CSS свойство padding
Свойство padding задает отступы со всех сторон контента элемента.
Значения свойства устанавливаются с помощью единиц измерения длины или процентов.
Отрицательные значения недопустимы.
CSS padding — это сокращенная форма записи для следующих свойств:
- padding-top
- padding-bottom
- padding-left
- padding-right
Можно использовать padding для всех сторон:
Свойство padding может быть указано, используя одно, две, три или четыре значения:
- Если указаны четыре значения, первое устанавливает верхнюю сторону, второе — правую, третье — нижнюю, и четвертое — левую сторону.
- Если указаны три значения, первое устанавливает верхнюю сторону, второе — правую и левую, а третье — нижнюю сторону.
- Если указаны две значения, первое устанавливает верхнюю и нижнюю, а второе правую и левую сторону.
- Если указано одно значение, оно применяется для четырех сторон.
Синтаксис
padding: length | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> p < background-color: #1c87c9; color: #fff; padding: 20px 40px 20px 40px; > style> head> body> h2>Пример свойства padding h2> p>Параграф с применением свойств background-color, color и padding. p> body> html>Код в вышеприведенном примере означает, что отступ сверху должен быть 20px, справа — 40px, снизу — 20px, а слева — 40px.
Рассмотрим другой пример, где отступ указан в процентах:
Пример
html> html> head> title>Заголовок документа title> style> p < background-color: #1c87c9; color: #fff; padding: 5% 10% 10% 5%; > style> head> body> h2>Пример свойства padding h2> p>Параграф с применением свойств background-color, color и padding. p> body> html>Пример, где указаны две значения. Первое устанавливает верхнюю и нижнюю сторону, а второе — правую и левую:
Пример
html> html> head> title>Заголовок документа title> style> p < background-color: #1c87c9; color: #fff; padding: 20px 40px; > style> head> body> h2>Пример свойства padding h2> p>Параграф с применением свойств background-color, color и padding. p> body> html>Значения
| Значение | Описание |
|---|---|
| length | Устанавливает отступ в единицах измерения (px, pt, cm и т. д.). Значение по умолчанию — 0. |
| % | Устанавливает отступ в процентах. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |