Oblazinjenje CSS omogoča kodirniku HTML, da nastavi privzeto oblazinjenje ali mrtvi prostor zunaj elementa HTML. Prednost tega je, da kodirniku prihrani ponavljanje te kode za oblazinjenje za vsak primerek tega elementa in lažje ustvari doslednost na strani. Element HTML, ki ga je treba oblaziniti, je lahko poljubno število stvari, na primer odstavek, tabela ali naslov.
Če želite ustvariti oblazinjenje v CSS, boste morali najprej identificirati element HTML, ki ga želite oblaziniti. Ta element, ki ga želite vstaviti, je znan kot izbirnik. Nato boste želeli določiti ustrezne vrednosti polnila. V CSS obstaja pet različnih vrst lastnosti oblazinjenja – ena za vse štiri strani elementa hkrati in štiri druge za vsako posamezno stran elementa (npr. leva stran, desna stran, zgornja stran ali spodnja stran ). Lastnost, ki programerju omogoča, da naenkrat poda vrednosti za vse štiri strani elementa HTML, se imenuje okrajšava lastnost.
Jezik kodiranja, ki se uporablja za določitev ene deklaracije oblazinjenja CSS, je preprosto beseda “padding”. Za to oznako so ustrezne »vrednosti« odmika ali informacije o želeni količini prostora, ki so običajno predstavljene bodisi s slikovnimi pikami ali odstotki. Obloge in vrednosti so zapisane v zavitih oklepajih ali oklepajih (tj. »{« in »}«). Pred vsem tem je element HTML, ki ga je treba oblaziniti (npr. “p” za odstavek ali “H2” za glave stopnje 2).
Glede na to, kako je vrednost predstavljena, so vrednosti lahko predstavljene v slikovnih pikah (npr. 1 px ali 5 px), točkah (npr. 1 pt ali 5 pt) ali palcih (npr. 1 in ali 5 in) ali centimetrih (npr. 1 cm ali 5 cm) . Vrednosti je mogoče navesti tudi kot odstotek elementa HTML, ki je oblikovan. Če je vrednost na primer 50 %, bo odmik enak polovici velikosti elementa.
Naslednji primeri so koda HTML za oblazinjenje elementa HTML z vrednostmi, izraženimi v odstotkih in dolžini. Če je dodeljena samo ena vrednost, bodo spletni brskalniki to oblazinjenje dodelili vsem štirim stranem elementa HTML.
oblazinjenje: 10 %;
oblazinjenje: 100px;
Če dodate več vrednosti zgornji izjavi vrste padding, jih bodo spletni brskalniki razlagali na določen način. Če sta dodeljeni dve vrednosti, bo prva ustrezala zgornji in spodnji, druga pa levi in desni. Zaradi treh vrednosti se bo prva nanašala na vrh, druga na levo in desno stran, tretja pa na dno elementa HTML. Če dodelite največ štiri vrednosti, se prva, druga, tretja in četrta vrednosti ujemajo z zgornjim, desnim, spodnjim in levim elementom HTML v tem vrstnem redu. Če je podanih več kot ena vrednost, jih je treba ločiti s presledki in končati s podpičjem, na primer:
padding:10px 20px 10px 20px;
Oblazinjenje v CSS se lahko izvaja tudi enostransko. V zvezi s tem so na voljo še štiri lastnosti oblazinjenja. To so padding-top, padding-right, padding-bottom in padding-left. Če želite ustvariti oblazinjenje v CSS na ta bolj natančen način, boste morali lastnosti označiti z isto sintakso kot kratke izjave kot zgoraj. Vsaka od teh lastnosti polnila ima samo eno vrednost v dolžini ali odstotku. Na primer:
padding-top: 10px;
padding-right:20px;
padding-bottom: 10px;
padding-left: 20px;
Naslednja koda ustvari spletno stran, razglasi lastnosti oblazinjenja med oznakami sloga in jih nato uporabi v elementu odstavka, določenem z oznako p. Besedilo med /* in */ so opombe za razlago vrste uporabljenega oblazinjenja in ne bi bilo vključeno v kodo za oblazinjenje CSS.
To besedilo ima enako oblazinjenje na vsaki strani. Odmik na vsaki strani je 10px.
To besedilo ima zgornji in spodnji odmik 50 slikovnih pik ter levi in desni odmik 30 slikovnih pik.
To besedilo ima zgornji odmik 10 slikovnih pik, desni odmik 20 slikovnih pik, spodnji odmik 10 slikovnih pik in levi odmik 20 slikovnih pik.
V zgornjem primeru so »primer1« itd. imena, dodeljena razredu, na katera se nato sklicujemo v odstavkih. Pika med oznako p in imeni razredov na začetku kode označuje izjavo razreda, dodeljenega odstavku. Upoštevajte oklepaje po deklaraciji razreda, ki obdaja dodelitve vrednosti lastnosti paddinga.
Čeprav se to morda zdi veliko dela, je veliko manj delovno intenzivno kot določanje oblazinjenja za vsak posamezen odstavek. Za želeni element lahko deklarirate eno lastnost paddinga, ki je v zgornjem primeru oznaka p, in se nato sklicujete na razred, ko uporabite element med oznakami telesa strani. Če je za vse odstavke potrebna samo ena vrsta oblazinjenja, vam razredov sploh ni treba uporabljati. Med oznakami sloga preprosto uporabite naslednjo kodo in nato kodirajte odstavke, ne da bi navedli nobenega razreda. Ta koda bi šla med oznake telesa namesto kode v zgornjem primeru.
p {padding:10px 20px 10px 20px;}
To oblazinjenje CSS, ki bi ga to ustvarilo, bi vplivalo na vse odstavke, čeprav ni bil določen noben razred.