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