A margintulajdonság meghatározza a dobozmodell legkülső részét, teret teremtve egy elem körül, a meghatározott határokon kívül.
A margók hossza, százaléka vagy a kulcsszó alapján vannak beállítva, autoés negatív értékeket tartalmazhatnak. Íme egy példa:
.box ( margin: 0 3em 0 3em; )margin rövidített tulajdonság, és legfeljebb négy értéket fogad el, amelyek itt láthatók:
.box ( margin: || || || )Ha négynél kevesebb érték van beállítva, akkor a hiányzó értékeket a meghatározottak alapján feltételezzük. Például a következő két szabálykészlet azonos eredményeket hozna:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Így, ha csak egy érték van megadva, ez mind a négy margót ugyanarra az értékre állítja. Ha három értéket deklarálunk, akkor az margin: (top) (left-and-right) (bottom);.
Az egyes margók bármelyike deklarálható hosszúkézi használatával, ebben az esetben tulajdonságonként csak egy értéket határozna meg:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto és központosítani
A margó tulajdonságok mindegyike elfogadhat egy értéket is auto. Egy érték autoalapvetően megmondja a böngészőnek, hogy határozza meg a margót az Ön számára. A legtöbb esetben a (z) értéke autoegyenértékű lesz a 0(amely az egyes margó tulajdonságok kezdeti értéke) értékével, vagy bármi mással, amely az elem ezen oldalán elérhető. Ez azonban autohasznos a vízszintes központosításhoz:
.container ( width: 980px; margin: 0 auto; )Ebben a példában két dolgot kell elvégezni, hogy ezt az elemet vízszintesen középre állítsuk a rendelkezésre álló területen belül:
- Az elem meghatározott szélességet kap
- A bal és jobb margók beállítása
auto
A megadott szélesség nélkül az autoértékeknek lényegében nincs hatásuk, a bal és a jobb margót úgy 0állítják, hogy a szülő elemen belül rendelkezésre álló hely legyen.
Arra is ki kell hívni a figyelmet, hogy autocsak vízszintes központosítás esetén hasznos, ezért autoa felső és az alsó margók használata nem fogja függőlegesen középre állítani az elemet, ami a kezdők számára zavaró lehet.
Összeomló margók
Az egymást érintő különböző elemek függőleges margói (amelyeknek nincs tartalma, kitöltése vagy határai elválasztják őket) összeomlanak, egyetlen margót alkotva, amely megegyezik a szomszédos margók nagyobbikával. Ez nem történik meg a vízszintes margókon (bal és jobb), csak függőlegesen (felső és alsó).
Illusztrációként vegye be a következő HTML-t:
Collapsing Margins
Example text.És a következő CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Ebben a példában az h2elem 20px alsó margót kap. A bekezdéselemnek, amely közvetlenül a forrásban követi, a felső margó 10 képpont.
A józan ész azt sugallja, hogy a függőleges h2margóvastagság a és a bekezdés között összesen 30 képpont (20 képpont + 10 képpont) lesz. De a margó összeomlása miatt a tényleges vastagság végül 20px lesz. Ezt mutatja be az alábbi beágyazott toll:
Bár az összeomló margók első ránézésre nem tűnik intuitívnak, valójában néhány okból hasznosak. Először megakadályozzák az üres elemeket abban, hogy extra, általában nem kívánt vertikális margóteret adjanak hozzá.
Másodszor, következetesebb megközelítést tesznek lehetővé az univerzális margók deklarálására az oldalelemek között. Például a címsorok általában függőleges margótérrel rendelkeznek, és a bekezdések is. Ha a margók nem omlanak össze, akkor a bekezdések (vagy fordítva) után következő címsorok gyakran megkövetelik a margók visszaállítását az egyik elemen, hogy egyenletes mennyiségű függőleges távolságot érjenek el.
Harmadszor, a margó összeomlása a beágyazott elemekre is érvényes. Nézze meg a következő tollat:
Itt a bekezdési elem felső margója 30 képpontra van beállítva, és egy divelembe van ágyazva , amelynek felső margója 40 képpont. Ezenkívül az h2elem alsó margója 20 képpont.
Ismét a józan ész azt sugallja, hogy a teljes függőleges margótér itt 90 képpontos (20 képpontos + 40 képpontos + 30 képpontos) lenne, de ehelyett a margók mind egyetlen 40 képpontos margóvá omlanak össze (a három közül a legmagasabbak). Ez a legtöbb esetben hasznos, mivel nincs szükség a felső margók egyikének újradefiniálására az extra függőleges tér eltávolításához.
Negatív margók
Mint feltételezheti, míg a pozitív margóérték más elemeket eltol, a negatív margó vagy maga az elemet húzza abba az irányba, vagy más elemeket húz maga felé.
Íme egy példa a párnázott tartályra, és a h2 fejléc negatív margókkal rendelkezik, amelyek ezen a párnázaton keresztül visszahúzódnak az élekig:
Lásd
: Chris Coyier (@chriscoyier)
a CodePen oldalon található negatív margók leggyakoribb használati esete .
Itt van egy példa, ahol az első bekezdés negatív alsó margóval rendelkezik, ami a következő bekezdést húzza fel.
Lásd
Chris Coyier (@chriscoyier) toll negatív margójának alsó bekezdését a CodePen
-en.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Művek | Művek | Művek | Művek | Művek | Művek | Művek |
Az IE6 hajlamos a duplázott float-margin hibára, amelyet a legtöbb esetben az úszó display: inlineelem hozzáadásával lehet megoldani .