Marginaali vs pehmuste
Marginaalin ja pehmusteen välinen ero on tärkeä näkökohta CSS: ssä, koska marginaali ja pehmusteet ovat CSS: ssä käytettyjä kahta tärkeää käsitettä, jotka tarjoavat etäisyyden eri kohteiden välillä. Täyte ja marginaalit eivät ole keskenään vaihdettavissa, ja niillä on eri tarkoitukset, joten niitä on käytettävä asianmukaisesti. Täyte on lohkon sisällön ja reunan välinen tila. Marginaali on toisaalta lohkon rajan ulkopuolella oleva tila. Reuna erottaa lohkot vierekkäisistä lohkoista, kun taas täyte erottaa reunan sisällöstä.
Mikä on pehmuste?
CSS: ssä (Cascading Style Sheets) täyte on sisällön ja reunan välinen tila. Se erottaa lohkon sisällön reunasta. Täyte on läpinäkyvä ja sisältää myös elementin taustakuvan tai taustavärin. Elementin täytteen määrä määritetään käyttämällä termiä "täyte" CSS-koodissa. Esimerkiksi lisäämällä 25 kuvapisteen täyte sisällön ympärille voidaan käyttää seuraavaa koodia.
div {
leveys: 300px;
korkeus: 300px;
täyte: 25px;
reunus: 25px kiinteä;
}
Tarvittaessa eri täyte-arvot voidaan määrittää erikseen myös vasemmalle, oikealle, ylhäältä ja alhaalta. Seuraava koodinpätkä määrittää kullekin puolelle erilaiset täyttöarvot.
div {
leveys: 300px;
korkeus: 300px;
toppaus: 25 kuvapistettä;
pehmustepohja: 35 kuvapistettä;
pehmuste vasen: 5 kuvapistettä;
täyte-oikea: 10px;
reunus: 25px kiinteä;
}
Mikä on marginaali?
CSS: ssä (Cascading Style Sheets) marginaali on rajan ulkopuolella oleva tila. Se erottaa lohkon muista lohkoista. Marginaali on myös läpinäkyvä, mutta suuri ero täytteessä on, että marginaali ei sisällä elementtiin käytettyjä taustakuvia tai taustavärejä. CSS: n marginaalin määrä määritetään termillä "marginaali". Seuraava koodikappale sovelsi 25 kuvapisteen marginaalia div-lohkon ympärille.
div {
leveys: 320px;
korkeus: 320px;
reunus: 5px kiinteä;
marginaali: 25 kuvapistettä;
}
Eri arvot voidaan määrittää myös lohkon eri puolille. Seuraava koodikappale käyttää eri marginaali-arvoja kummallekin puolelle.
div {
leveys: 320px;
korkeus: 320px;
reunus: 5px kiinteä;
yläreuna: 25 kuvapistettä;
alareuna: 35 kuvapistettä;
marginaali vasemmalla: 5 kuvapistettä;
marginaali oikea: 10 kuvapistettä;
}
Mitä eroa on marginaalin ja pehmusteen välillä?
• Täyte on väli reunan ja sisällön välillä, kun taas marginaali on tila reunan ulkopuolella.
• Täyte erottaa lohkon sisällön reunasta. Marginaali erottaa yhden lohkon toisesta.
• Täyte koostuu taustakuvista ja sisältöön käytetyistä taustaväreistä, kun taas marginaali ei sisällä sellaista.
• Viereisten lohkojen marginaalit voivat olla päällekkäisiä, kun taas pehmusteet eivät ole päällekkäisiä.
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, että täyte sisältää taustakuvan ja taustavärit, joita käytetään sisällön ympärillä, kun taas marginaali ei sisällä niitä. Viereisten lohkojen marginaalit voivat joskus olla päällekkäisiä, kun selain renderöi sivun, mutta täytteeksi tällaista ei tapahdu.
Kuvat Kohteliaisuus:
