marginObjekto apibrėžia nutolusi dalį dėžutės modelį, sukurti erdvę aplink elemento, Išorės bet kokių apibrėžtų sienų.
Paraštės nustatomos naudojant ilgius, procentus arba raktinį žodį autoir gali turėti neigiamų verčių. Štai pavyzdys:
.box ( margin: 0 3em 0 3em; )margin yra sutrumpinta savybė ir priima iki keturių reikšmių, parodytų čia:
.box ( margin: || || || )Jei nustatoma mažiau nei keturios reikšmės, trūkstamos vertės laikomos pagrįstomis apibrėžtomis. Pvz., Šie du taisyklių rinkiniai gautų identiškus rezultatus:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Taigi, jei apibrėžta tik viena reikšmė, visos keturios paraštės nustatomos ta pačia verte. Jei deklaruojamos trys vertės, tai yra margin: (top) (left-and-right) (bottom);.
Bet kurią atskirą paraštę galima deklaruoti naudojant „longhand“, tokiu atveju kiekvienai nuosavybei apibrėžtumėte tik vieną vertę:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto ir centravimas
Kiekviena paraštės savybė taip pat gali priimti vertę auto. Vertė iš autoesmės nurodo naršyklei nustatyti jums skirtumą. Daugeliu atvejų reikšmė autobus lygiavertė reikšmei 0(kuri yra pradinė kiekvienos paraštės savybės vertė) arba kitai toje elemento pusėje esančiai erdvei. Tačiau autoyra patogu horizontaliai centruoti:
.container ( width: 980px; margin: 0 auto; )Šiame pavyzdyje yra du dalykai, kad šis elementas būtų horizontaliai sutelktas laisvoje erdvėje:
- Elementui suteikiamas nurodytas plotis
- Kairysis ir dešinysis paraštės nustatytos į
auto
Be nurodyto pločio autoreikšmės iš esmės neturės jokio poveikio, kairės ir dešinės paraštės bus nustatytos 0į bet kurią laisvą vietą pagrindiniame elemente.
Taip pat reikėtų pažymėti, kad autotai naudinga tik horizontaliai centruojant, todėl naudojant autoviršutinę ir apatinę paraštes elementas nebus vertikaliai centruotas, o tai gali būti painu pradedantiesiems.
Griūva paraštės
Skirtingų elementų, liečiančių vienas kitą (taigi neturinčio turinio, užpildo ar juos atskiriančių sienų), vertikalios paraštės subyrės ir sudarys vieną paraštę, lygią didesnei iš gretimų paraštių. Tai nenutinka horizontaliosiose paraštėse (kairėje ir dešinėje), tik vertikaliai (viršuje ir apačioje).
Norėdami iliustruoti, paimkite šį HTML:
Collapsing Margins
Example text.Ir ši CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Šiame pavyzdyje h2elementui suteikiama apatinė 20 taškų paraštė. Pastraipos elemento, kuris iškart seka šaltinyje, viršutinė paraštė nustatyta 10 taškų.
Sveikas protas, atrodo, rodo, kad vertikalios paraštės storis tarp h2ir pastraipos iš viso bus 30 taškų (20 taškų + 10 taškų). Tačiau dėl maržos žlugimo faktinis storis yra 20 taškų. Tai įrodyta žemiau esančiame įdėtame rašiklyje:
Nors griūvančios paraštės iš pirmo žvilgsnio gali atrodyti nenaudingos, jos iš tikrųjų yra naudingos dėl kelių priežasčių. Pirma, jie neleidžia tuštiems elementams pridėti papildomos, paprastai nepageidaujamos, vertikalios tarpo vietos.
Antra, jie leidžia taikyti nuoseklesnį požiūrį deklaruojant universalias paraštes visuose puslapio elementuose. Pavyzdžiui, antraštėse, kaip ir pastraipose, paprastai yra vertikalios paraštės tarpas. Jei paraštės nesugriuvo, antraštės, einančios po pastraipomis (arba atvirkščiai), dažnai reikalauja iš naujo nustatyti vieno iš elementų paraštes, kad būtų pasiektas pastovus vertikalių tarpų kiekis.
Trečia, maržos žlugimas taip pat taikomas įdėtiems elementams. Pažvelkite į šį rašiklį:
Čia pastraipos elemento viršutinė paraštė nustatyta kaip 30 taškų ir ji yra įdėta į divelementą, kurio viršutinė paraštė yra 40 taškų. Be to, h2elemento apatinė paraštė yra 20 taškų.
Vėlgi, sveikas protas rodo, kad visa vertikalios paraštės erdvė čia būtų 90 taškų (20 taškų + 40 taškų + 30 taškų), tačiau visos jos paraštės sutrinka į vieną 40 taškų ribą (didžiausia iš trijų). Tai daugeliu atvejų naudinga, nes norint išvalyti papildomą vertikalią erdvę nereikia iš naujo apibrėžti jokių viršutinių paraštių.
Neigiamos paraštės
Kaip galite įtarti, nors teigiama paraštės vertė nustumia kitus elementus, neigiama paraštė arba patraukia patį elementą ta linkme, arba kitus elementus jo link.
Čia pateikiamas konteinerio su užpildu pavyzdys, o antraštėje h2 yra neigiamos paraštės, kurios per tą užpildą traukia atgal į kraštus:
Žr
. Chriso Coyierio (@chriscoyier)
„CodePen“ dažniausiai naudojamą rašiklį neigiamoms paraštėms.
Štai pavyzdys, kai pirmoje pastraipoje yra neigiama apatinė paraštė, kuri nukreipia kitą pastraipą.
Žr
. Chriso Coyierio (@chriscoyier) „Pen Negative Margin“ ištraukiančią apatinę pastraipą „
CodePen“.
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Veikia | Veikia | Veikia | Veikia | Veikia | Veikia | Veikia |
IE6 yra linkusi į dvigubą „float-margin“ klaidą, kurią daugeliu atvejų galima išspręsti pridėjus display: inlineprie plūduriuojančio elemento.