CSS polstring er en af egenskaberne ved CSS boksmodel. Denne stenografiske egenskab indstiller polstringen omkring alle fire sider af et HTML-element. CSS polstring kan anvendes på næsten alle HTML-tag (undtagen nogle af tabellemærkerne). Derudover kan alle fire sider af elementet have en anden værdi.
CSS polstringsejendom
For at bruge den stenografiske CSS-polstringsejendom kan du bruge mnemonic “TRouBLe” (eller “TRiBbLe” til Star Trek fans). Dette står for top, ret, bundog venstre, og det refererer til rækkefølgen af de polstringsbredder, du indstiller i shorthand-ejendommen. For eksempel:
polstring: øverst til højre nederst til venstre;
polstring: 1px 2px 3px 6px;
Hvis du brugte ovenstående værdier, ville den anvende en anden polstringsværdi på hver side af det HTML-element, du anvender det på. Hvis du vil anvende den samme polstring på alle fire sider, kan du forenkle din CSS og skriv bare en værdi:
polstring: 12px;
Med den linje af CSS vil 12 pixels polstring gælde for alle 4 sider af elementet.
Hvis du ønsker, at polstringen skal være den samme for top og bund og til venstre og højre, kan du skrive to værdier:
polstring: 24px 48px;
Den første værdi (24 pixel) gælder for toppen og bunden, mens den anden gælder for venstre og højre.
Hvis du skriver tre værdier, vil det gøre den vandrette polstring (venstre og højre) den samme, mens du ændrer top og bund:
polstring: øverst til højre og venstre nederst;
polstring: 0px 1px 3px;
I henhold til CSS-boksmodellen er polstring tættest på selve elementet / indholdet. Dette betyder, at der tilføjes polstring til et element mellem indholdsbredden eller -højden og de randværdier, du bruger. Hvis polstringen er sat til nul, har den samme kant som indholdet.
CSS polstringsværdier
CSS-polstring kan tage enhver ikke-negativ længdeværdi. Sørg for at angive målingen, f.eks. Px eller em. Du kan også angive en procentdel for din polstring, som vil være en procentdel af bredden af elementets indholdsblok. Dette inkluderer polstring i top og bund. For eksempel:
#container {bredde: 800px; højde: 200px; }
#container p {bredde: 400px; højde: 75%; polstring: 25% 0; }
Det højde i afsnittet inde i #beholder element vil være 75% af #beholder'S højde plus 25% af bredden til den øverste polstring og 25% af bredden til den nederste polstring. Dette udgør i alt 300 + 200 + 200 = 700 pixel.
Effekter af tilføjelse af CSS-polstring
På elementer på blokniveau, polstringen påføres på de fire sider. Fordi elementet allerede er en blok eller kasse, anvendes polstringen på kassens sider.
Når CSS polstring føjes til integrerede elementer, kan der være en vis overlapning af elementer over og under det inline-element, hvis den lodrette polstring overstiger liniehøjden, men det skubber ikke liniehøjden ned. Horisontal CSS-polstring, der anvendes på indbyggede elementer, føjes til begyndelsen af elementet og slutningen af elementet. Og polstringen kan omvikle linjer. Men det gælder ikke for alle linjer i et element med flere linjer, så du kan ikke bruge polstring til at indrykke et segment af multi-line indbygget indhold.
I CSS2.1 kan du heller ikke oprette containerblokke, hvor bredden afhænger af et element med procenter for bredder (eller polstringsbredder). Hvis du gør, er resultatet udefineret. Browsere viser stadig indholdet, men du får muligvis ikke de resultater, du forventer. Hvis du tænker over det, giver det mening, som om dit containerelement skal kende bredden på dets underordnede elementer for at definere dets bredde - f.eks. når den ikke har en foruddefineret bredde, og en eller flere har en bredde indstillet som en procentdel af beholderelementet, opretter dette en cirkulær kæde uden svar. Hvis du bruger procenter for bredder af noget i dit dokument, skal du sørge for, at overordnede elementbredder også er defineret.