marginOminaisuus määrittää uloimman osan laatikon malli, luodaan tilaa noin elementti, ulkopuolella kaikki määritetyt rajat.
Marginaalit asetetaan pituuksien, prosenttiosuuksien tai avainsanan perusteella, autoja niillä voi olla negatiivisia arvoja. Tässä on esimerkki:
.box ( margin: 0 3em 0 3em; )margin on lyhytominaisuus ja hyväksyy enintään neljä arvoa, jotka näkyvät tässä:
.box ( margin: || || || )Jos asetetaan vähemmän kuin neljä arvoa, oletetaan puuttuvat arvot määriteltyjen arvojen perusteella. Esimerkiksi seuraavat kaksi sääntöjoukkoa saisivat samanlaiset tulokset:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Jos siis määritetään vain yksi arvo, tämä asettaa kaikki neljä marginaalia samaan arvoon. Jos ilmoitetaan kolme arvoa, se on margin: (top) (left-and-right) (bottom);.
Mikä tahansa yksittäinen marginaali voidaan ilmoittaa pitkäkäden avulla, jolloin määrität vain yhden arvon ominaisuutta kohti:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto ja keskittäminen
Jokainen marginaaliominaisuus voi hyväksyä myös arvon auto. Arvo autokertoo selaimen pohjimmiltaan määrittelemän marginaalin sinulle. Useimmissa tapauksissa arvo autovastaa arvoa 0(joka on kunkin marginaaliominaisuuden alkuarvo) tai muuta mitä tilaa on käytettävissä elementin tällä puolella. On kuitenkin autokätevä vaakasuuntaiseen keskitykseen:
.container ( width: 980px; margin: 0 auto; )Tässä esimerkissä tämän elementin keskittämiseksi vaakasuoraan käytettävissä olevaan tilaan tehdään kaksi asiaa:
- Elementille annetaan määritelty leveys
- Vasen ja oikea marginaali on asetettu
auto
Ilman määritettyä leveyttä autoarvoilla ei olennaisesti ole vaikutusta, jos vasen ja oikea marginaali 0asetetaan ylätason elementin sisällä olevaan vapaaseen tilaan.
On myös huomattava, että se autoon hyödyllinen vain vaakasuorassa keskittämisessä, joten autoylä- ja alamarginaalien käyttö ei keskitä elementtiä pystysuunnassa, mikä voi olla hämmentävää aloittelijoille.
Romahtavat marginaalit
Eri elementtien pystysuorat marginaalit, jotka koskettavat toisiaan (jolloin niillä ei ole sisältöä, täytettä tai reunoja, jotka erottavat ne) romahtavat, muodostaen yhden marginaalin, joka on yhtä suuri kuin vierekkäisistä marginaaleista suurempi. Tätä ei tapahdu vaakasuorilla marginaaleilla (vasemmalla ja oikealla), vain pystysuunnassa (ylhäällä ja alhaalla).
Ota esimerkki seuraavasta HTML: stä:
Collapsing Margins
Example text.Ja seuraava CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Tässä esimerkissä h2elementille annetaan 20 pikselin alamarginaali. Kappale-elementillä, joka seuraa sitä heti lähteessä, ylimmän marginaalin arvoksi on asetettu 10 kuvapistettä.
Terve järki näyttäisi viittaavan siihen, että pystysuuntainen marginaalin paksuus h2ja kappaleen välillä olisi yhteensä 30 kuvapistettä (20 kuvapistettä + 10 kuvapistettä). Mutta marginaalin romahduksen takia todellinen paksuus on 20 pikseliä. Tämä näkyy alla olevassa upotetussa kynässä:
Vaikka romahtavat marginaalit saattavat tuntua ensi silmäyksellä epäjohdonmukaisilta, ne ovat itse asiassa hyödyllisiä muutamista syistä. Ensinnäkin ne estävät tyhjiä elementtejä lisäämästä ylimääräistä, yleensä ei-toivottua, pystysuoraa marginaalitilaa.
Toiseksi ne mahdollistavat johdonmukaisemman lähestymistavan yleisten marginaalien ilmoittamiseen sivuelementtien yli. Esimerkiksi otsikoissa on yleensä pystysuora marginaalitila, samoin kappaleissa. Jos marginaalit eivät romahtaneet, kappaleita seuraavat otsikot (tai päinvastoin) vaativat usein yhden elementin marginaalien nollaamisen, jotta pystysuora väli saadaan tasaisesti.
Kolmanneksi marginaalin romahdus koskee myös sisäkkäisiä elementtejä. Katso seuraavaa kynää:
Tässä kappaleelementin yläreunaksi on asetettu 30 kuvapistettä, ja se on sisäkkäin divelementin sisällä , jonka ylä marginaali on 40 kuvapistettä. Lisäksi h2elementin alamarginaali on 20 kuvapistettä.
Jälleen terve järki ehdottaa, että pystysuora marginaalitila olisi tässä 90px (20px + 40px + 30px), mutta sen sijaan kaikki marginaalit romahtavat yhdeksi 40px-marginaaliksi (korkein kolmesta). Tästä on hyötyä useimmissa tapauksissa, koska ylimääräisiä marginaaleja ei tarvitse määrittää uudelleen ylimääräisen pystytilan poistamiseksi.
Negatiiviset marginaalit
Kuten epäilet, positiivinen marginaali-arvo työntää muita elementtejä poispäin, negatiivinen marginaali joko vetää elementin itse tähän suuntaan tai vetää muita elementtejä sitä kohti.
Tässä on esimerkki astiasta, jossa on täyte, ja otsikossa h2 on negatiiviset marginaalit, jotka vetävät itsensä kyseisen pehmusteen läpi takaisin reunoihin:
Katso
Chris Coyierin (@chriscoyier) kynä, joka on yleisin negatiivisten marginaalien käyttötapa
CodePenissä.
Tässä on esimerkki, jossa ensimmäisessä kappaleessa on negatiivinen alamarginaali, joka vetää seuraavan kappaleen ylöspäin.
Katso
Chris Coyierin (@chriscoyier) kynän negatiivisen marginaalin vetävä alaosa
CodePenistä.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | Toimii | Toimii | Toimii | Toimii | Toimii | Toimii |
IE6 on altis kaksinkertaistuneelle float-margin-virheelle, joka voidaan ratkaista useimmissa tapauksissa lisäämällä kelluvaan display: inlineelementtiin.