Marginaali vs täyttö
Reunuksen ja täytön välinen ero on tärkeä näkökohta CSS:ssä, koska marginaali ja täyte ovat kaksi tärkeää käsitettä, joita käytetään CSS:ssä antamaan välilyöntejä eri kohteiden välillä. Pehmusteet ja marginaalit eivät ole keskenään vaihdettavissa ja niillä on eri käyttötarkoituksia, joten niitä on käytettävä asianmukaisesti. Täyte on sisällön ja lohkon reunan välinen tila. Reuna taas on lohkon rajan ulkopuolella oleva tila. Marginaali erottaa lohkot vierekkäisistä lohkoista, kun taas täyte erottaa reunuksen sisällöstä.
Mikä on pehmuste?
CSS:ssä (Cascading Style Sheets) täyte on sisällön ja reunuksen välissä oleva tila. Se erottaa lohkon sisällön sen reunasta. Täyte on läpinäkyvä ja sisältää myös elementin taustakuvan tai taustavärin. Elementin täytön määrä määritellään käyttämällä termiä "täyte" CSS-koodissa. Voit esimerkiksi lisätä 25 kuvapisteen täytön sisällön ympärille seuraavaa koodia.
div {
leveys: 300px;
korkeus: 300px;
täyte: 25px;
reuna: 25px kiinteä;
}
Tarvittaessa eri täytearvot voidaan määrittää erikseen myös vasemmalle, oikealle, ylä- ja alapuolelle. Seuraava koodinpätkä määrittää eri täyttöarvot jokaiselle puolelle.
div {
leveys: 300px;
korkeus: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
täyte-oikea: 10px;
reuna: 25px kiinteä;
}
Mikä on marginaali?
CSS:ssä (Cascading Style Sheets) marginaali on rajan ulkopuolella oleva tila. Se erottaa lohkon muista lohkoista. Reunus on myös läpinäkyvä, mutta suuri ero pehmusteella on, että marginaali ei sisällä taustakuvia tai elementtiin lisättyjä taustavärejä. CSS:n marginaalin määrä määritellään termillä "marginaali". Seuraava koodinpätkä lisäsi 25 kuvapisteen marginaalin div-lohkon ympärille.
div {
leveys: 320px;
korkeus: 320px;
reuna: 5px kiinteä;
marginaali: 25px;
}
Eri arvot voidaan määrittää myös lohkon eri puolille. Seuraava koodinpätkä käyttää eri marginaaliarvoja kummallekin puolelle.
div {
leveys: 320px;
korkeus: 320px;
reuna: 5px kiinteä;
margin-top: 25px;
marginaali-ala: 35px;
marginaali-vasen: 5px;
marginaali-oikea: 10px;
}
Mitä eroa on marginaalilla ja täyteaineella?
• Täyte on reunan ja sisällön välinen tila, kun taas marginaali on rajan ulkopuolella oleva tila.
• Täyte erottaa lohkon sisällön reunuksesta. Marginaali erottaa lohkon toisesta.
• Täyte koostuu taustakuvista ja sisältöön käytetyistä taustaväreistä, kun taas marginaali ei sisällä sellaista.
• Vierekkäisten lohkojen marginaalit voivat mennä päällekkäin, kun taas täyte ei mene päällekkäin.
Yhteenveto:
Täyte vs marginaali
Täyte on lohkon reunan sisällä oleva tila, joka erottaa reunan sisällöstä. Marginaali on rajan ulkopuolella oleva väli, joka erottaa lohkon viereisistä lohkoista. Toinen ero on se, että täyte sisältää taustakuvan ja taustavärit, jotka on lisätty sisällön ympärille, kun taas marginaali ei sisällä niitä. Vierekkäisten lohkojen marginaalit voivat joskus mennä päällekkäin, kun selain renderöi sivun, mutta täytettäessä tällaista ei tapahdu.
