Veris vs täidis
Erinevus veerise ja täidise vahel on CSS-is oluline aspekt, kuna veeris ja täidis on kaks olulist mõistet, mida CSS-is kasutatakse erinevate üksuste vahede pakkumiseks. Polsterdus ja veerised ei ole omavahel asendatavad ning neil on erinev otstarve, seega tuleb neid õigesti kasutada. Täidis on ruum sisu ja ploki piiri vahel. Veeris seevastu on ruum väljaspool ploki piiri. Veeris eraldab plokid külgnevatest plokkidest, täidis aga eraldab äärise sisust.
Mis on polster?
CSS-is (Cascading Style Sheets) on polsterdus sisu ja äärise vahele jääv ruum. See eraldab ploki sisu selle servast. Polster on läbipaistev ja sisaldab ka elemendi taustapilti või taustavärvi. Elemendi täidise suurus määratakse CSS-koodis terminiga "padding". Näiteks 25 piksli suuruse täidise lisamiseks sisu ümber võib kasutada järgmist koodi.
div {
laius: 300 pikslit;
kõrgus: 300 pikslit;
polster: 25px;
ääris: 25 pikslit tahke;
}
Vajadusel saab erinevaid polsterduse väärtusi eraldi määrata ka vasakule, paremale, ülemisele ja alumisele küljele. Järgmine koodiosa määrab iga külje jaoks erinevad polsterduse väärtused.
div {
laius: 300 pikslit;
kõrgus: 300 pikslit;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
ääris: 25 pikslit tahke;
}
Mis on marginaal?
CSS-is (Cascading Style Sheets) on veeris piirist väljaspool olev ruum. See eraldab ploki teistest plokkidest. Veeris on samuti läbipaistev, kuid suureks erinevuseks polsterduse puhul on see, et veeris ei sisalda taustapilte ega elemendile kantud taustavärve. CSS-i marginaali suurus määratakse terminiga "marginaali". Järgmine koodiosa kasutas div-ploki ümber 25 piksli suuruse veerise.
div {
laius: 320 pikslit;
kõrgus: 320 pikslit;
ääris: 5 pikslit tahke;
veeris: 25 pikslit;
}
Ploki erinevatele külgedele saab määrata ka erinevaid väärtusi. Järgmine koodiosa rakendab mõlemale küljele erinevaid veerise väärtusi.
div {
laius: 320 pikslit;
kõrgus: 320 pikslit;
ääris: 5 pikslit tahke;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
veeris-parem: 10px;
}
Mis vahe on veerisel ja täidisel?
• Täidis on ruum piiri ja sisu vahel, veeris aga piirist väljaspool olev ruum.
• Täidis eraldab ploki sisu piirist. Veeris eraldab ühe ploki teisest.
• Täidis koosneb taustapiltidest ja sisule rakendatud taustavärvidest, samas kui veeris seda ei sisalda.
• Kõrvuti asetsevate plokkide veerised võivad kattuda, samas kui polsterdus ei kattu.
Kokkuvõte:
Padding vs veeris
Padding on ploki piiri sees olev ruum, mis eraldab piiri sisust. Veeris on piirist väljaspool olev vahe, mis eraldab plokki külgnevatest plokkidest. Teine erinevus seisneb selles, et polsterdus sisaldab taustapilti ja sisu ümber rakendatud taustavärve, samas kui veeris neid ei sisalda. Külgnevate plokkide veerised võivad mõnikord kattuda, kui brauser lehe renderdab, kuid polsterdamisel seda ei juhtu.
