Свойство CSS padding отвечает за задание отступов внутри элемента от его границы
Синтаксис CSS padding
padding: top right bottom left;
Где:
- top - отступ от верхней границы элемента;
- right - отступ от правой границы элемента;
- bottom - отступ от нижней границы элемента;
- left - отступ от левой границы элемента;
Значения чаще всего задаются в пикселях. Допускается также задание в виде процентов и других допустимых единицах CSS.
Примечание 1
Допускается задание не четырех значений. В зависимости от количества значений действия будут разные:
- Если задано 3 значения, то первое значение устанавливает отступ сверху, второе — одновременно слева и справа, а третье — снизу
- Если задано 2 значения, то первое значение устанавливает отступ сверху и снизу, второе — слева и справа от содержимого
- Если задано 1 значение, то отступ задается одинаковый отступ для всех сторон. Например:
padding: 10px 10px 10px 10px; Можно задать компактнее: padding: 10px;
Примечание 2
В отличии от свойства CSS margin, отрицательные значения у padding не допустимы.
Также у padding есть 4 отдельных свойства CSS. Каждое из них отвечает за какое-то направление.
- padding-left - отступ от левой границы элемента;
- padding-right - отступ от правой границы элемента;
- padding-top - отступ от верхней границы элемента;
- padding-bottom - отступ от левой границы элемента;
Например
padding: 3px 5px 7px 10px; Или можно задать подробно: padding-left: 10px; padding-right: 5px; padding-top: 3px; padding-bottom: 7px;
Примеры с разными отступами внутри элемента
Пример 1. Отступ текста внутри тега <div>
<html> <head> <style> .padding1{ width: 250px; height: auto; border: 1px dotted #1E90FF; padding: 0px; } .padding2{ width: 250px; height: auto; border: 1px dotted #1E90FF; padding: 10px; } .padding3{ width: 250px; height: auto; border: 1px dotted #1E90FF; padding: 10px 0px 0px 30px; } </style> </head> <body> <div class="primer1">Пример с нулевыми отступам (padding: 0px)</div> <div class="primer2">Пример с одинаковым отступом от всех границ (padding: 10px)</div> <div class="primer3">Пример с разными отступам (padding: 10px 0px 0px 30px)</div> </body> </html>
Вот как это выглядит на странице:
Пример 2. Отступ объекта внутри объекта
<html> <head> <style> .padding4{ width: 200px; height: 150px; border: 1px dotted #1E90FF; padding: 10px 0px 0px 60px; background: #2323AA; } .padding4 .block{ width: 100px; height: 80px; background: #fff; border: 1px dotted #bbb; } </style> </head> <body> <div class="padding4"> <div class="block"></div> </div> </body> </html>
Для обращения к padding из JavaScript нужно писать следующую конструкцию:
[window.]document.getElementById("elementID").style.padding="VALUE"
Читайте также:
• Свойство css border
• Свойство css background
• Свойство css transition
• Свойство text-decoration
• Свойство vertical-align
• Свойство white-space
• Свойство word-wrap
• Свойство z-index
• Линейный градиент
• Радиальный градиент