Съгласно блоковия модел, показването на CSS подложка или поле е отклонение от външната граница на елемент към неговото съдържание. CSS ви позволява да управлявате размера на подложката за всяка страна на блока поотделно или за всички страни в даден момент. За да се постигне правилното показване на даден елемент, е важно да се разберат особеностите на изчисляването на вътрешните отстъпи.

група за подложки-свойства

Има цяла група от свойства, които описват подплата в CSS. Това е:

padding-top - контролира стойността на горното поле;

padding-right - променя вдлъбнатината;

подложка-дъно - контролира размера на долната подложка;

padding-left - задава ширината на вдлъбнатината наляво.

Общото свойство на padding в CSS ви позволява да дефинирате всичките четири полета в едно правило. Инструкцията може да приеме от един до четири аргумента:

4 параметри. Подложките се преобразуват по посока на часовниковата стрелка, започвайки от върха. Записът се използва, ако всяка страна има собствен размер на отстъпа.

//подложка: padding-top padding-right padding-bottom padding-left
.element {
подплата: 10px 20px 30px 40px;
}

• 3 параметъра. Ако страничните полета са равни, те могат да бъдат групирани в един аргумент. Поръчка за прехвърляне: горно, ляво и дясно, долно поле.

//подложка: padding-top padding-right + запълване-ляво padding-bottom
.element {
 подложка: 10px 20px 30px; 
}

• 2 параметъра. Частично групиране на горната част с долно и ляво с десни полета.

//подложка: padding-top + padding-bottom padding-right + padding-left
.element {
 подплата: 10px 20px; 
}

• 1 параметър. Задава размерасамо за всички подложки.

.елемент {
 подложка: 10px; 
}

Място в структурата на блока

Стойността на запълване в CSS по подразбиране се включва в общата стойност на заетия пространствен елемент.

.block1 {
 ширина: 100px;
височина: 100 пиксела;
запълване-дясно: 30px;
подложка-отгоре: 20px; 
}

За елемент.block1реалният размер ще бъде 130px в ширина и 120px във височина. Свойстватависочинаивисочинапо подразбиране определят размера на тематичната област, а пълнежът в CSS се измерва отделно.

Единици за измерване

Можете да укажете размера на запълване във всички единици за разстояние, използвани в CSS - пиксели, проценти, em или rem.

Важно: ако процентът е настроен на отстъп, той винаги ще бъде приспаднат от ширината на елемента PARENT, дори ако е отгоре или отдолу.

.parent {
 ширина: 200px;
височина: 100 пиксела; 
}
.block2 {
 височина: 30px;
ширина: 100 пиксела;
подложка-дъно: 10%; 
}

За блокblock2 , долната подложка ще бъде 20px (10% от 200px), а реалната височина е 50px.

За разлика от маржа, запълването в CSS не може да бъде по-малко от нула. Когато изпращате отрицателна стойност на инструкцията, тя просто ще бъде игнорирана от браузъра.

Елементи на единични позиции

Дефинирането на тиретата на отстъп за елементи с дисплей тип низ има своите тънкости.

За блокове, които са част от линия,стойността на горните и долните полета винаги се игнорира, тъй като те могат да нарушат конструкцията.

разстояние {
 запълване-ляво: 30px;
запълване-дясно: 20px;
подложка-отгоре: 50px;
подложка-дъно: 40px; 
}

Ляво и дясно от елементаучастъкще се появят съответните инструкции за вдлъбнатини, но няма да има вертикално изместване на линията. Всъщност, браузърът ще зададе необходимите полета на блока, но няма значение, тъй като те не засягат мястото му в общата нишка. Свойството CSS padding се поддържа добре от всички браузъри, включително най-старите, и може да бъде анимирано с помощта на анимационни и преходни инструкции.