CSS подложката е едно от свойствата на Модел на CSS кутия. Това стенографско свойство задава подложката около четирите страни на HTML елемент. CSS подложката може да се приложи към почти всеки HTML таг (с изключение на някои от етикетите на таблицата). Освен това и четирите страни на елемента могат да имат различна стойност.
Свойство за подплата на CSS
За да използвате свойството за подбиване на стенографски CSS, можете да използвате мнемоничното „TRouBLe“ (или „TRiBbLe“ за вашите фенове на Star Trek). Това означава Горна част, нали, отдолу, и налявои се отнася до реда на ширините на подплънките, които сте задали в свойството за стенография. Например:
подплата: горе вдясно, долу вляво;
подплата: 1px 2px 3px 6px;
Ако сте използвали изброените по-горе стойности, той ще приложи различна стойност за подплата към всяка страна на който и да е HTML елемент, към който го прилагате. Ако искате да приложите една и съща подложка към четирите страни, можете да опростите вашата CSS и просто напишете една стойност:
подплата: 12px;
С тази линия на CSS, 12 пиксела подложка ще се прилагат към всичките 4 страни на елемента.
Ако искате подложката да бъде еднаква за горната и долната и лявата и дясната страна, можете да напишете две стойности:
подложка: 24px 48px;
Първата стойност (24px) ще се прилага за горната и долната част, докато втората ще се отнася за лявата и дясната страна.
Ако напишете три стойности, това ще направи хоризонталната подложка (лява и дясна) еднаква, докато променяте горната и долната част:
подложка: горе вдясно и вляво отдолу;
подплата: 0px 1px 3px;
Според модела на CSS кутията подложката е най-близо до самия елемент / съдържание. Това означава, че подложка се добавя към елемент между ширината или височината на съдържанието и всички стойности на границите, които използвате. Ако подложката е зададена на нула, тогава тя има същия ръб като съдържанието.
Стойности за подплата на CSS
CSS подложката може да приеме всяка неотрицателна стойност на дължината. Не забравяйте да посочите измерването, като px или em. Можете също така да посочите процент за вашата подложка, който ще бъде процент от ширината на съдържащия блок елемент. Това включва подплата отгоре и отдолу. Например:
#container {ширина: 800px; височина: 200px; }
#container p {width: 400px; височина: 75%; подплата: 25% 0; }
The височина на абзаца в #контейнер елемент ще бъде 75% от #контейнерВисочина плюс 25% от ширината за горната подплата и 25% от ширината за долната подплата. Това възлиза на 300 + 200 + 200 = 700px.
Ефекти от добавянето на CSS Padding
На елементи на ниво блок, подложката се нанася от четирите страни. Тъй като елементът вече е блок или кутия, подложката се прилага към страните на кутията.
Когато се добавя CSS подложка към вградени елементи, може да има някои припокриващи се елементи над и под вградения елемент, ако вертикалната подложка надвишава височината на линията, но това няма да измести височината на линията надолу. Хоризонтални CSS подложки, приложени към вградени елементи, ще бъдат добавени към началото на елемента и края на елемента. И подложката може да увива линии. Но това няма да се отнася за всички редове на многоредов елемент, така че не можете да използвате подложка, за да отстъпите сегмент от многоредово вградено съдържание.
Също така, в CSS2.1 не можете да създавате контейнерни блокове, където ширината зависи от елемент с проценти за ширини (или ширини за подплата). Ако го направите, резултатът е неопределен. Браузърите пак ще показват съдържанието, но може да не получите резултатите, които очаквате. Ако се замислите, има смисъл, сякаш елементът на контейнера трябва да знае ширината на своите дъщерни елементи, за да определи неговата ширина - като напр. когато няма предварително зададена ширина и една или повече има зададена ширина като процент от елемента на контейнера, това създава кръгова верига без отговор. Ако използвате проценти за ширини на каквото и да е във вашия документ, трябва да сте сигурни, че ширините на родителския елемент също са дефинирани.