Свойство padding задает расстояние (ширину полей) от границ блока до его содержимого для всех или только для указанных сторон.
Это свойство применимо ко всем элементам.
Структура блока
Значение свойства padding
Значение задается в единицах длины, принятых в CSS (подробнее здесь...) или в %,
- auto – автоматически задается браузером,
- inherit - принимает значение свойства родительского элемента.
При задании ширины полей допускается указывать от 1 до 4 значений, разделяя их пробелом. Результат зависит от количества и приведен в таблице:
| Количество значений | Результат |
| 1 | Ширина полей от всех границ элемента до его содержимого одинакова. |
| 2 | Первое значение устанавливает ширину полей от верхней и нижней границ, второе – от боковых границ элемента. |
| 3 | Первое значение устанавливает ширину поля от верхней границы, второе – от боковых границ, а третье значение – от нижней границы элемента. |
| 4 | Значения поочередно устанавливают ширину полей от верхней, правой, нижней и левой границ элемента. |
Таким образом свойство padding объединяет в себе свойства padding-top , padding-right , padding-bottom и padding-left , которые устанавливают поля от каждой из границ элемента индивидуально.
- auto или 0
<html>
<head>
<meta charset="utf-8">
<title> Свойство padding </title>
</head>
<body>
<p style="background-color:#00FF99; border:#330066 solid 2px; padding:10px;"> Поля от содержимого абзаца - в данном случае от текста, до его границ составляют 10 пикселей. </p>
<p style="border:#FF3300 solid 1px; width:300px; padding:10px 40px;"> Поля от верхней и нижней границ составляют 10 пикселей; от боковых границ - 40 пикселей. </p>
</body>
</html>
И еще. Так как поля располагаются внутри блока, то фон блока или его фоновое изображение на них распространяются.
Хотелось бы отметить, что свойство padding в основном применяется к блочным элементам и к тегу <img>.
И, как Вы уже, наверное догадались, представленное описание этого свойства относится именно к блочным элементам.
Свойство padding можно применить и к строчным элементам, но это случается крайне редко и вряд ли кем-то используется. Возможно я не прав, но судите сами:
<html>
<head>
<meta charset="utf-8">
<title> Свойство padding </title>
</head>
<body>
<p style="border:#CC0033 solid 2px; padding:10px;"> Абзац - это блочный элемент. </p>
<span style="border:#CC0033 solid 2px; padding:20px;"> Это строчный элемент. Поля - 20 пикселей. </span>
<p> 1. <u> Добавим еще один строчный элемент. Без применения стилей: </u> </p>
<span> Строчный элемент. </span> <span> Строчный элемент. </span>
<p> 2. <u> Добавим оформление: </u> </p>
<strong style="border:#CC0033 solid 2px; padding:10px;"> Строчный элемент. </strong> <span style="border:#CC0033 solid 2px; padding:10px;"> Строчный элемент. </span>
<p> 3. <u> Без границ. Только отступы. </u> </p>
<span style="padding:10px;"> Строчный элемент. </span> <span style="padding:10px;"> Строчный элемент. </span>
<p> 4. <u> Перенос строчного элемента! </u> </p>
<span style="border::#CC0033 solid 2px; padding:10px;"> Строчный элемент. </span> <br>
<span style="border:#CC0033 solid 2px; padding:10px;"> Строчный элемент. </span>
<p> 5. <u> В случае с блочными элементами: </u> </p>
<p style="border:#CC0033 solid 2px; padding:10px;"> Абзац </p>
<p style="border:#CC0033 solid 2px; padding:10px;"> Абзац </p>
</body>
</html>
Как видите, получается сумбур какой-то. Без комментариев.
Попробуйте поэкспериментировать (в том числе и со свойствами padding-top, padding-right, padding-bottom и padding-left), почитайте о блочных и строчных элементах (подробнее здесь...), и на практике, с опытом Вы сами все поймете!
