CSS polstring er en av egenskapene til CSS-boksmodell. Denne stenografiske egenskapen setter polstringen rundt alle fire sidene av et HTML-element. CSS-polstring kan brukes på nesten alle HTML-tag (bortsett fra noen av tabellkodene). I tillegg kan alle fire sider av elementet ha en annen verdi.
CSS polstring eiendom
For å bruke den stenografiske CSS-polstringsegenskapen, kan du bruke mnemonic “TRouBLe” (eller “TRiBbLe” for Star Trek-fans). Dette står for topp, Ikke sant, bunn, og venstre, og det refererer til rekkefølgen på polstringsbredden du angir i shorthand-egenskapen. For eksempel:
polstring: øverst til høyre nede til venstre;
polstring: 1px 2px 3px 6px;
Hvis du brukte verdiene som er oppført ovenfor, vil det bruke en annen polstringsverdi på hver side av det HTML-elementet du bruker det på. Hvis du vil bruke samme polstring på alle fire sider, kan du forenkle CSS og bare skriv en verdi:
polstring: 12px;
Med den linjen med CSS, vil 12 piksler med polstring gjelde for alle 4 sidene av elementet.
Hvis du vil at polstringen skal være den samme for topp og bunn og venstre og høyre, kan du skrive to verdier:
polstring: 24px 48px;
Den første verdien (24 piksler) vil gjelde øverst og nederst, mens den andre gjelder venstre og høyre.
Hvis du skriver tre verdier, vil det gjøre den horisontale polstringen (venstre og høyre) den samme, mens du endrer topp og bunn:
polstring: øverst til høyre og venstre nederst;
polstring: 0px 1px 3px;
I følge CSS-boksmodellen er polstring nærmest selve elementet / innholdet. Dette betyr at polstring legges til et element mellom innholdsbredden eller høyden og eventuelle grenseverdier du bruker. Hvis polstringen er satt til null, har den samme kanten som innholdet.
CSS polstringsverdier
CSS-polstring kan ta en hvilken som helst verdi som ikke er negativ. Husk å spesifisere målingen, for eksempel px eller em. Du kan også angi en prosentandel for polstringen din, som vil være en prosentandel av bredden på elementets inneholder blokk. Dette inkluderer topp og bunn polstring. For eksempel:
#container {bredde: 800px; høyde: 200px; }
#container p {bredde: 400px; høyde: 75%; polstring: 25% 0; }
De høyde av avsnittet inne i #container elementet vil være 75% av #containerHøyden pluss 25% av bredden for den øverste polstringen og 25% av bredden for den nederste polstringen. Dette utgjør 300 + 200 + 200 = 700 px.
Effekter av å legge til CSS-polstring
På elementer på blokknivå, polstringen påføres på de fire sidene. Fordi elementet allerede er en blokk eller boks, påføres polstringen på boksens sider.
Når CSS-polstring legges til innebygde elementer, kan det være noe overlapping av elementer over og under det innebygde elementet hvis den vertikale polstringen overstiger linjehøyden, men den vil ikke skyve linjehøyden ned. Horisontal CSS-polstring brukt på innebygde elementer legges til begynnelsen av elementet og slutten av elementet. Og polstringen kan vikle linjer. Men det gjelder ikke alle linjene i et flerlinjeelement, så du kan ikke bruke polstring til å rykke inn et segment med flerlinjelinjeinnhold.
I CSS2.1 kan du ikke opprette containerblokker der bredden avhenger av et element med prosenter for bredder (eller polstringsbredder). Hvis du gjør resultatet er udefinert. Nettlesere vil fremdeles vise innholdet, men du får kanskje ikke resultatene du forventer. Hvis du tenker på det, er det fornuftig, som om containerelementet ditt må vite bredden på de underordnede elementene for å definere bredden - for eksempel når den ikke har en forhåndsdefinert bredde, og en eller flere har en bredde satt som en prosentandel av beholderelementet, setter dette opp en sirkulær kjede uten svar. Hvis du bruker prosentandeler for bredder av noe som helst i dokumentet ditt, bør du sørge for at overordnede elementbredder også er definert.