CSS отстъп (padding)

Отстъп (padding) се използва, за да се освободи място между съдържанието на елемент и неговата рамка.

Подобно на margin, стойностите на отстъпа могат да се задават индивидуално за четирите страни или съкретно - за всички наведнъж.

За стойности на свойството padding се използват:

• числа, следвани от мерните им единици (px, pt, em и т.н.);
• проценти (%) - размерът на отстъпа се изчислява като процент от размера на елемента;
• ключовата дума auto.

Указване на индивидуални отстъпи

Всеки от четирите отстъпа може да бъде зададен отделно:

• paddign-top: 30px;
• padding-right: 25px;
• padding-bottom: 20px;
• paddiing-left: 15px;

По този начин горният отстъп ще стане 30 пиксела, десния - 25, долния - 20 и левия - 15 пиксела.

Използване на съкратен запис

Както и margin, padding свойството може да бъде зададено по съкратен начин:

• padding: 30px 25px 20px 15px; Когато padding е използван с четири стойности те означават съответно горен, десен, долен и ляв отстъп.
• padding: 30px 20px 15px; Трите стойности съответстват на горен, (ляв и десен - равни) и долен отстъп.
• padding: 30px 20px; Padding с две стойности се използва, когато горния отстъп е равен на долния (първата стойност), а левия - на десния отстъп (втората стойност).
• padding: 25px; Ако всички отстъпи са равни, те може да се зададат само с една стойност на padding.

Няколко примера

Отстъп в клетки на таблици. По този начин се избягва наблъскването на текста в рамката на табличната клетка:

td {padding-left: 0.5em; padding-right:2em}

Отместване на заглавие, за да няма застъпване с включено фоново изображение:

h1 {
background: url(sun.gif) no-repeat;
height: 80px;
padding-left: 130px;
}