Свойство CSS padding

Свойство 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>

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 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

• Линейный градиент

• Радиальный градиент


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.