Marginaali ja polsterduse erinevus

Marginaal vs polster
 

Marginaali ja polsterduse erinevus on oluline aspekt CSS kuna marginaal ja polster on CSS-is kasutatud kahte olulist mõistet, et pakkuda erinevate üksuste vahelist vahet. Polster ja veerised ei ole omavahel asendatavad ja neil on erinevad eesmärgid, seetõttu tuleb neid asjakohaselt kasutada. Polsterdus on tühik sisu ja ploki piiri vahel. Varu seevastu on ruum väljaspool ploki piiri. Marginaal eraldab plokid külgnevatest plokkidest, samal ajal kui polster eraldab piiri sisust.

Mis on polster?

CSS-is (Kaskaad-stiililehed), polster on sisu ja piiri vahel hoitav ruum. See eraldab ploki sisu servast. Polster on läbipaistev ja sisaldab ka elemendi taustpilti või taustavärvi. Elemendi polsterduse suurus täpsustatakse CSS-koodis kasutades mõistet “polster”. Näiteks saab 25-pikslise polsterduse lisamiseks sisu ümber kasutada järgmist koodi.

div
laius: 300 pikslit;
kõrgus: 300 pikslit;
polster: 25px;
ääris: 25 px tahke;

Vajadusel saab erinevad polstriväärtused eraldi määrata ka vasakule, paremale, ülemisele ja alumisele osale. Järgmine kood kirjeldab mõlemal küljel erinevaid polsterdusväärtusi.

div
laius: 300 pikslit;
kõrgus: 300 pikslit;
polsterdus: 25px;
polster-põhi: 35px;
polster-vasak: 5px;
polster paremal: 10 pikslit;
ääris: 25 px tahke;

Mis on Margin?

CSS-is (Cascading Style Sheets) on marginaal ruumi piirist väljas. See eraldab ploki teistest plokkidest. Veeris on ka läbipaistev, kuid polstriga võrreldes on suur erinevus see, et veeris ei sisalda elemendi suhtes rakendatud taustpilte ega taustavärve. CSS-i marginaali suurust täpsustatakse, kasutades terminit “marginaal”. Järgmine kooditükk rakendas div-ploki ümber 25 pikslist marginaali.

div
laius: 320 pikslit;
kõrgus: 320 pikslit;
ääris: 5 px tahke;
veeris: 25 px;

Samuti saab ploki eri külgedele määrata erinevaid väärtusi. Järgmine kood rakendab mõlemal küljel erinevaid veeriste väärtusi.

div
laius: 320 pikslit;
kõrgus: 320 pikslit;
ääris: 5 px tahke;
veerise ülaosa: 25 pikslit;
veerise põhi: 35 pikslit;
veeris-vasak: 5 px;
paremäär: 10 pikslit;

Mis vahe on Marginil ja Paddingul??

• Polsterdus on ruumi piiride ja sisu vahe ning marginaal on piirist väljaspool olev ruum.

• Polsterdus eraldab ploki sisu piirist. Veeris eraldab ühe ploki teisest.

• Polsterdus koosneb taustpiltidest ja taustvärvidest, mida sisu rakendatakse, samas kui ääris ei sisalda sellist sisu.

• Külgnevate klotside veerised võivad kattuda, samal ajal kui polster ei kattu.

Kokkuvõte:

Polsterdamine vs Margin

Polsterdamine on ruut piiri sees, mis eraldab piiri sisust. Marginaal on vahe väljaspool piiri, mis eraldab ploki külgnevatest plokkidest. Teine erinevus on see, et polster sisaldab taustapilti ja taustavärve, mida rakendatakse sisu ümber, samas kui veerised neid ei sisalda. Külgnevate plokkide veerised võivad vahel kattuda, kui brauser lehe renderdab, kuid polsterdamiseks sellist asja ei juhtu.

Pildid viisakalt:

1. CSS kasti mudel, autor Felix.leg (CC BY-SA 3.0)