CSS-i polsterdus võimaldab HTML-kooderil määrata vaiketäidise või tühja ruumi väljaspool HTML-elementi. Selle tegemise eeliseks on see, et see säästab kodeerijat selle elemendi iga eksemplari jaoks seda täidiskoodi kordamast ja loob lehel hõlpsamini järjepidevuse. Polsterdatav HTML-element võib olla suvaline arv asju, näiteks lõik, tabel või pealkiri.
CSS-is täidise loomiseks peate esmalt tuvastama HTML-elemendi, mida soovite polsterdada. Seda elementi, mida soovite polsterdada, nimetatakse valijaks. Seejärel soovite määrata sobivad polsterduse väärtused. CSS-is on viis erinevat tüüpi polsterdusomadusi – üks elemendi kõigi nelja külje jaoks korraga ja neli muud elemendi iga üksiku külje jaoks (nt vasak külg, parem külg, ülemine külg või alumine külg ). Atribuuti, mis võimaldab programmeerijal määrata väärtusi HTML-elemendi kõigi nelja külje jaoks korraga, nimetatakse stenogrammi omaduseks.
Kodeerimiskeel, mida kasutatakse ühe CSS-i täidise deklaratsiooni määramiseks, on lihtsalt sõna “padding”. Selle sildi järel on polstri asjakohased “väärtused” või teave soovitud ruumi suuruse kohta, mis on tavaliselt esitatud kas pikslite või protsentides. Polsterdus ja väärtused kirjutatakse lokkis sulgudesse või lokkis sulgudesse (st „{” ja „}”). Sellele kõigele eelneb polsterdatav HTML-element (nt “p” lõigu jaoks või “H2” 2. taseme päiste jaoks).
Väärtuse esitusviisi järgi saab väärtusi esitada pikslites (nt 1 pikslit või 5 pikslit), punktides (nt 1 pt või 5 pt) või tollides (nt 1 toll või 5 tolli) või sentimeetrites (nt 1 cm või 5 cm) . Väärtused saab deklareerida ka protsendina kujundatavast HTML-elemendist. Kui väärtus on näiteks 50%, võrdub polsterdus poole elemendi suurusest.
Järgmised näited on HTML-kood HTML-elemendi täidiseks väärtuste abil, mis kajastuvad vastavalt protsentides ja pikkuses. Kui on määratud ainult üks väärtus, määravad veebibrauserid selle täidise HTML-elemendi kõigile neljale küljele.
polster: 10%;
polster: 100px;
Kui lisate ülaltoodud polsterduse deklaratsiooni tüübile rohkem väärtusi, tõlgendavad veebibrauserid neid teatud viisil. Kui on määratud kaks väärtust, vastab esimene ülemisele ja alumisele väärtusele, teine aga vasakule ja paremale. Kolm väärtust viitavad esimesele HTML-elemendi ülaosale, teise vasakule ja paremale küljele ning kolmanda alaosale. Maksimaalselt nelja väärtuse määramisel vastavad esimene, teine, kolmas ja neljas väärtus HTML-elemendi ülemisele, paremale, alumisele ja vasakule osale selles järjekorras. Kui esitatakse rohkem kui üks väärtus, tuleb need eraldada tühikutega ja lõpetada semikooloniga, näiteks:
polsterdus: 10px 20px 10px 20px;
CSS-i polsterdamist saab teha ka üks pool korraga. Sellega seoses on saadaval veel neli polsterduse omadust. Need on polsterdus-ülemine, polsterdus-parem, polster-alumine ja polsterdus-vasak. CSS-is sellisel täpsemal viisil täidise loomiseks peate atribuudid märgistama sama süntaksiga nagu ülaltoodud stenogrammide deklaratsioonid. Kõik need polsterdusomadused võtavad ainult ühe väärtuse kas pikkuses või protsentides. Näiteks:
padding-top: 10px;
polsterdus-parem: 20px;
padding-bottom: 10px;
padding-vasakule: 20px;
Järgmine kood loob veebilehe, deklareerib stiilimärgendite vahel olevad polsterduse omadused ja kasutab neid seejärel märgendi p määratud lõiguelemendis. Märgistuste /* ja */ vahel olev tekst on märkused, mis selgitavad kasutatava polsterduse tüüpi ja ei sisaldu CSS-i täidiskoodis.
Selle teksti mõlemal küljel on sama polsterdus. Polsterdus mõlemal küljel on 10 pikslit.
Selle teksti ülemine ja alumine täidis on 50 pikslit ning vasak ja parem täidis 30 pikslit.
Selle teksti ülemine polster on 10 pikslit, parempoolne täidis 20 pikslit, alumine täidis 10 pikslit ja vasak täidis 20 pikslit.
Ülaltoodud näites on “example1” jne klassile määratud nimed, millele seejärel lõikudes viidatakse. Punkt märgendi p ja klassinimede vahel koodi alguses tähistab lõigule määratud klassi deklaratsiooni. Pange tähele sulgusid pärast klassideklaratsiooni, mis sisaldab polsterduse atribuudi väärtuse määranguid.
Kuigi see võib tunduda palju tööd, on see palju vähem töömahukas kui iga üksiku lõigu jaoks polsterduse määramine. Soovitud elemendi jaoks saate deklareerida ühe polsterduse atribuudi, milleks ülaltoodud näites on silt p, ja seejärel viidata klassile, kui kasutate elementi lehe kehamärgendite vahel. Kui kõigi lõikude jaoks on vaja ainult ühte tüüpi polsterdust, ei pea te klasse üldse kasutama. Kasutage stiilimärgendite vahel lihtsalt järgmist koodi ja seejärel kodeerige lõigud ilma klassi määramata. See kood läheks ülaltoodud näite koodi asemel kehamärgendite vahele.
p {padding: 10px 20px 10px 20px;}
See loodav CSS-i täidis mõjutaks kõiki lõike, kuigi klassi pole määratud.