Свойство padding - это тот самый «внутренний отступ», который создает комфортное пространство между рамкой элемента и его содержимым. Важно понимать: добавляя внутренние поля, вы напрямую влияете на итоговый размер блока, что стоит учитывать при верстке.
Главная «фишка» этого свойства - удобство. Вы можете задать все необходимые отступы одной командой вместо четырех отдельных объявлений. В синтаксисе допустимо использовать от одного до четырех значений, разделенных пробелами. Если параметров несколько, браузер начинает их применять строго по порядку: сверху, справа, снизу и слева.
Тот, как именно раскроется визуальный эффект, зависит исключительно от того, сколько значений вы укажете:
| Количество значений | Результат |
|---|
| 4 значения | Значения устанавливаются сразу для четырех внутренних полей. В этом случае они будут идти в определенном порядке: первое значение относится к верхнему полю, второе к правому, третье к нижнему, четвертое к левому. |
| 3 значения | Первое значение устанавливает внутреннее поле сверху, второе - одновременно слева и справа, а третье - снизу. |
| 2 значения | Первое значение устанавливает внутренние поля сверху и снизу, второе - слева и справа от содержимого. |
| 1 значение | Поля будут установлены одновременно со всех сторон, при этом ширина всех полей будет одинаковая. |
Обратите внимание: отрицательные значения внутренних полей не допускаются.
Будьте особенно внимательны с вертикальными отступами в строчных элементах (inline). Если значение padding превышает высоту строки, это может привести к неприятному эффекту перекрытия соседних элементов сверху или снизу. Это частая «боль» при работе с текстом!
Примечание: для установки внутренних полей отдельно для каждой стороны элемента, используйте следующие свойства: , , , .
| Значение по умолчанию: | 0 |
|---|
| Наследуется: | нет |
|---|
| Версия: | CSS1 |
|---|
| Синтаксис JavaScript: | object.style.padding="10px 5px" |
|---|
Синтаксис и значения свойства
padding: [размер | проценты] {1 ... 4} | inherit;| Значение | Описание |
|---|
| размер | Определяет размер внутреннего поля в , поддерживающихся в CSS. |
| % | Определяет размер внутреннего поля в процентах, при этом размер поля будет зависеть от ширины родительского элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример