Táto marginvlastnosť definuje najodľahlejšiu časť krabicového modelu a vytvára priestor okolo prvku mimo vymedzených hraníc.
Okraje sa nastavujú pomocou dĺžok, percentuálnych údajov alebo kľúčového slova autoa môžu mať záporné hodnoty. Tu je príklad:
.box ( margin: 0 3em 0 3em; )margin je skratková vlastnosť a prijíma až štyri hodnoty, ktoré sú zobrazené tu:
.box ( margin: || || || )Ak sú nastavené menej ako štyri hodnoty, predpokladajú sa chýbajúce hodnoty na základe tých, ktoré sú definované. Napríklad nasledujúce dve sady pravidiel by získali rovnaké výsledky:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Ak je teda definovaná iba jedna hodnota, nastavia sa všetky štyri okraje na rovnakú hodnotu. Ak sú deklarované tri hodnoty, je to margin: (top) (left-and-right) (bottom);.
Ktorúkoľvek z jednotlivých marží je možné deklarovať pomocou ručnej práce, v takom prípade by ste pre každú vlastnosť definovali iba jednu hodnotu:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto a centrovanie
Každá z vlastností okraja môže prijať aj hodnotu auto. Hodnota v autopodstate hovorí prehliadaču, aby určil okraj za vás. Vo väčšine prípadov bude hodnota autoekvivalentná hodnote 0(čo je počiatočná hodnota pre každú vlastnosť okraja) alebo akémukoľvek priestoru, ktorý je na tejto strane prvku k dispozícii. Je však autoužitočné pre horizontálne centrovanie:
.container ( width: 980px; margin: 0 auto; )V tomto príklade sa urobia dve veci, aby sa tento prvok vycentroval vodorovne v rámci dostupného priestoru:
- Element má zadanú šírku
- Ľavý a pravý okraj sú nastavené na
auto
Bez zadanej šírky by autohodnoty v podstate nemali žiadny účinok, a to nastavením ľavého a pravého okraja na 0alebo na akýkoľvek iný dostupný priestor vo vnútri nadradeného prvku.
Je tiež potrebné zdôrazniť, že autoje to užitočné iba pre horizontálne centrovanie, takže použitie autohorného a spodného okraja nebude centrovať prvok vertikálne, čo môže byť pre začiatočníkov mätúce.
Kolapsové marže
Zvislé okraje na rôznych prvkoch, ktoré sa navzájom dotýkajú (teda neobsahujú žiadny obsah, polstrovanie alebo hranice, ktoré ich oddeľujú) sa zbalia a vytvoria jeden okraj, ktorý sa rovná väčšiemu z priľahlých okrajov. To sa nestáva na vodorovných okrajoch (vľavo a vpravo), iba vo zvislom smere (hore a dole).
Na ilustráciu použite nasledujúci kód HTML:
Collapsing Margins
Example text.A nasledujúce CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )V tomto príklade má h2prvok spodný okraj 20 pixelov. Element odseku, ktorý za ním v zdroji bezprostredne nasleduje, má horný okraj nastavený na 10 pixelov.
Zdá sa, že zdravý rozum naznačuje, že hrúbka vertikálneho okraja medzi h2odsekom a celkom by bola 30 pixelov (20 pixelov + 10 pixlov). Ale kvôli zrúteniu okraja bude skutočná hrúbka 20px. To demonštruje vložené pero nižšie:
Aj keď sa zrútenie okrajov môže na prvý pohľad zdať neintuitívne, sú skutočne užitočné z niekoľkých dôvodov. Po prvé, bránia prázdnym prvkom v pridávaní nadbytočného, zvyčajne nežiaduceho, vertikálneho okrajového priestoru.
Po druhé, umožňujú dôslednejší prístup k deklarovaniu univerzálnych marží medzi prvkami stránky. Napríklad nadpisy majú bežne priestor so zvislým okrajom, rovnako tak aj odstavce. Ak sa okraje nezrútili, nadpisy, ktoré nasledujú po odsekoch (alebo naopak), by často vyžadovali vynulovanie okrajov jedného z prvkov, aby sa dosiahlo konzistentné množstvo vertikálnych medzier.
Po tretie, kolaps okrajov sa vzťahuje aj na vnorené prvky. Pozrite sa na toto pero:
Element odseku má tu horný okraj nastavený na 30 pixelov a je vnorený do divprvku s horným okrajom 40 pixelov. Okrem toho má h2prvok dolný okraj 20px.
Zdravý rozum opäť naznačuje, že celkový priestor s vertikálnym okrajom by tu bol 90 pixlov (20 pixelov + 40 pixelov + 30 pixelov), ale všetky okraje sa namiesto toho zrútia do jedného okraja s veľkosťou 40 pixelov (najvyšší z troch). To je užitočné vo väčšine prípadov, pretože nie je potrebné predefinovať žiadny z horných okrajov, aby sa odstránil nadbytočný zvislý priestor.
Negatívne marže
Ako by ste mohli tušiť, že zatiaľ čo kladná hodnota marže tlačí ďalšie prvky preč, záporná marža buď potiahne samotný prvok v tomto smere, alebo potiahne ďalšie prvky smerom k nemu.
Tu je príklad kontajnera s výplňou a hlavička h2 má záporné okraje, ktoré sa tiahnu cez túto výplň späť k okrajom:
Prečítajte si
prípad najbežnejšieho použitia pera pre negatívne marže, ktorý napísal Chris Coyier (@chriscoyier)
na stránke CodePen.
Tu je príklad, keď má prvý odsek záporný dolný okraj, ktorý ťahá ďalší odsek proti.
Pozrite si Pen
Negative Margin ťahajúci spodný odsek od Chrisa Coyiera (@chriscoyier)
na stránke CodePen.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Tvorba | Tvorba | Tvorba | Tvorba | Tvorba | Tvorba | Tvorba |
IE6 je náchylný na zdvojnásobenú chybu float-margin, ktorú je možné vo väčšine prípadov vyriešiť pridaním display: inlinek floatovanému prvku.