CSS-i polsterdus on üks selle omadustest CSS kasti mudel. See lühike omadus määrab polstrid ümber HTML-elemendi kõigi nelja külje. CSS-i polsterdust saab rakendada peaaegu kõigile HTML-märgend (välja arvatud mõned tabeli sildid). Lisaks võib elemendi kõigil neljal küljel olla erinev väärtus.
CSS-i polsterdusvara
Lühikese CSS-i polsterduse atribuudi kasutamiseks võite kasutada mälumälu “TRouBLe” (või “TRiBbLe” teie jaoks Star Treki fännidele). See tähistab üles, eks, altja vasakuleja see viitab atribuudi shorthand seadistatud polstrilaiuste järjekorrale. Näiteks:
polster: üleval paremal all vasakul;
polster: 1px 2px 3px 6px;
Kui kasutaksite ülaltoodud väärtusi, rakendaks see HTML-elemendi igale küljele, millele te seda rakendate, erinevat täiteväärtust. Kui soovite kõigile neljale küljele sama polsterdust rakendada, saate seda lihtsustada CSS ja kirjutage lihtsalt üks väärtus:
polster: 12px;
Selle CSS-i rea korral rakenduks elemendi kõigile 4 küljele 12 pikslit polsterdust.
Kui soovite, et polster oleks ülemise ja alumise ning vasakule ja paremale sama, võite kirjutada kaks väärtust:
polster: 24px 48px;
Esimene väärtus (24px) rakendub ülemisele ja alumisele osale, teine aga vasakule ja paremale.
Kui kirjutate kolm väärtust, muudab see horisontaalse polsterduse (vasakule ja paremale) samaks, muutes samal ajal ülemist ja alumist:
polsterdus: üleval paremal ja vasakul all;
polster: 0px 1px 3px;
CSS-i kasti mudeli järgi on polster kõige lähemal elemendile / sisule endale. See tähendab, et sisule laiuse või kõrguse ja kõigi teie kasutatavate äärisväärtuste vahele lisatakse täidis. Kui polster on seatud nulli, on sellel sama sisu kui sisul.
CSS-i täiteväärtused
CSS-i polster võib võtta mis tahes negatiivse pikkuse väärtuse. Kindlasti määrake mõõtmine, näiteks px või em. Samuti võite oma polstrile määrata protsendi, mis on protsent elementi sisaldava ploki laiusest. See hõlmab ülemist ja alumist polsterdust. Näiteks:
#container {width: 800px; kõrgus: 200px; }
#container p {laius: 400px; kõrgus: 75%; polster: 25% 0; }
The kõrgus lõike sees #konteiner element moodustab 75% #konteiner’Kõrgus pluss 25% ülemise polsterduse laiusest ja 25% alumise polsterduse laiusest. See on kokku 300 + 200 + 200 = 700 pikslit.
CSS-i polstrite lisamise mõjud
Peal plokitaseme elemendid, polster kantakse neljale küljele. Kuna element on juba plokk või kast, rakendatakse polster kasti külgedele.
Kui CSS-i polster lisatakse tekstisisesed elemendid, võib sisemise elemendi kohal ja all olla elementide kattuvus, kui vertikaalne polster ületab joone kõrgust, kuid see ei lükka joone kõrgust alla. Sisestele elementidele rakendatud horisontaalne CSS-polster lisatakse elemendi algusesse ja lõppu. Ja polster võib mähkida jooni. Kuid see ei kehti mitmerealise elemendi kõigi ridade kohta, nii et te ei saa kasutada mitmerealise sisusegmendi taandamiseks polsterdust.
Samuti ei saa CSS2.1-s luua konteinerplokke, mille laius sõltub elemendist, mille laiused (või polsterduslaiused) on protsentides. Kui teete, pole tulemus määratletud. Brauserid kuvavad endiselt sisu, kuid te ei pruugi oodatud tulemusi saada. Kui järele mõelda, on mõistlik, justkui peaks teie konteinerelement selle laiuse määratlemiseks teadma alamelementide laiust - näiteks kui sellel pole eelnevalt määratletud laiust ja ühel või enamal on laius protsendina konteinerelemendist seatud, loob see ümmarguse ahela ilma vastus. Kui kasutate protsesse kõigi dokumentide laiuste jaoks, peaksite veenduma, et ka vanemelemendi laiused on määratletud.