Marginaalin ja pehmusteen ero

Marginaali vs. Padding
 

Marginaalin ja pehmusteen välinen ero on tärkeä näkökohta CSS koska reunus ja pehmuste ovat CSS: ssä käytettyjä tärkeitä käsitteitä etäisyyden aikaansaamiseksi eri esineiden välillä. Pehmusteet ja reunukset eivät ole vaihdettavissa, ja niillä on eri tarkoitukset, joten niitä on käytettävä asianmukaisesti. Pehmustus on tila sisällön ja lohkon reunan välillä. Marginaali sitä vastoin on lohkon rajan ulkopuolella oleva tila. Marginaali erottaa lohkot vierekkäisistä lohkoista, kun taas täyte erottaa reunan sisällöstä.

Mikä on pehmustus?

CSS: ssä (CSS-tyylisivut), tyyny on sisällön ja reunan välinen tila. Se erottaa lohkon sisällön reunastaan. Pehmuste on läpinäkyvä ja sisältää myös elementin taustakuvan tai taustavärin. Elementin pehmusteen määrä määritetään käyttämällä termiä "padding" CSS-koodissa. Voit esimerkiksi lisätä 25px-tyynyn seuraavan koodin ympärille.

div
leveys: 300 kuvapistettä;
korkeus: 300px;
pehmustus: 25 px;
reuna: 25px kiinteä;

Tarvittaessa voidaan erilaisia ​​pehmustearvoja määrittää erikseen myös vasemmalle, oikealle, ylhäälle ja alalle. Seuraava koodinumero määrittelee erilaiset täyttöarvot molemmille puolille.

div
leveys: 300 kuvapistettä;
korkeus: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
reuna: 25px kiinteä;

Mikä on Margin?

CSS: ssä (Cascading Style Sheets), marginaali on rajojen ulkopuolella oleva tila. Se erottaa lohkon muista lohkoista. Marginaali on myös läpinäkyvä, mutta suuri ero pehmusteessa on, että marginaali ei sisällä taustakuvia tai elementtiin käytettyjä taustavärejä. Marginaalin määrä CSS: ssä määritetään käsitteellä ”marginaali”. Seuraava koodinpätkä lisäsi 25px-marginaalin div-lohkon ympärille.

div
leveys: 320 kuvapistettä;
korkeus: 320 kuvapistettä;
reuna: 5px kiinteä;
marginaali: 25 px;

Eri arvot voidaan määrittää myös lohkon eri puolille. Seuraava koodinumero käyttää erilaisia ​​marginaaliarvoja molemmille puolille.

div
leveys: 320 kuvapistettä;
korkeus: 320 kuvapistettä;
reuna: 5px kiinteä;
marginaalikansi: 25px;
marginaali-pohja: 35px;
reuna-vasen: 5px;
marginaali-oikea: 10px;

Mikä on ero marginaalin ja Paddingin välillä??

• Pehmustus on rajan ja sisällön välinen tila, kun taas marginaali on rajan ulkopuolella.

• Pehmustus erottaa lohkon sisällön reunasta. Marginaali erottaa yhden lohkon toisesta.

• Pehmustus koostuu taustakuvista ja sisällön taustaväreistä, kun taas marginaali ei sisällä sellaista.

• Vierekkäisten lohkojen reunat voivat olla päällekkäisiä, kun taas pehmuste ei ole päällekkäin.

Yhteenveto:

Padding vs Margin

Pehmustus on tila lohkon reunan sisällä, joka erottaa reunan sisällöstä. Marginaali on rajan ulkopuolella oleva etäisyys, joka erottaa lohkon vierekkäisistä lohkoista. Toinen ero on, että pehmuste sisältää taustakuvan ja sisällön ympärille levitetyt taustavärit, kun taas marginaali ei sisällä niitä. Vierekkäisten lohkojen marginaalit saattavat joskus olla päällekkäisiä, kun selain näyttää sivun, mutta täyttämistä ei tapahdu.

Kuvat kohteliaisuus:

1. CSS-laatikkomalli, kirjoittanut Felix.leg (CC BY-SA 3.0)