marginProprietatea definește porțiunea exterioară a modelului caseta, creând spațiu în jurul unui element, în afara oricăror frontiere definite.
Marginile sunt setate folosind lungimi, procente sau cuvântul cheie autoși pot avea valori negative. Iată un exemplu:
.box ( margin: 0 3em 0 3em; )margin este o proprietate de prescurtare și acceptă până la patru valori, prezentate aici:
.box ( margin: || || || )Dacă sunt setate mai puțin de patru valori, valorile lipsă sunt asumate pe baza celor definite. De exemplu, următoarele două seturi de reguli ar obține rezultate identice:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Astfel, dacă este definită o singură valoare, aceasta setează toate cele patru marje la aceeași valoare. Dacă sunt declarate trei valori, este margin: (top) (left-and-right) (bottom);.
Oricare dintre marjele individuale poate fi declarată folosind longhand, caz în care ați defini o singură valoare pentru fiecare proprietate:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto și centrare
Fiecare dintre proprietățile de marjă poate accepta, de asemenea, o valoare de auto. O valoare a autoindică practic browserului să vă definească marja. În majoritatea cazurilor, o valoare de autova fi echivalentă cu o valoare de 0(care este valoarea inițială pentru fiecare proprietate de marjă) sau orice alt spațiu disponibil pe acea parte a elementului. Cu toate acestea, autoeste la îndemână pentru centrarea orizontală:
.container ( width: 980px; margin: 0 auto; )În acest exemplu, se fac două lucruri pentru a centra acest element orizontal în spațiul disponibil:
- Elementului i se oferă o lățime specificată
- Marginile stânga și dreapta sunt setate la
auto
Fără lățimea specificată, autovalorile nu ar avea în esență niciun efect, setând marginile din stânga și din dreapta 0sau, altfel, în orice spațiu disponibil din interiorul elementului părinte.
De asemenea, trebuie subliniat faptul că autoeste util doar pentru centrarea orizontală și, prin urmare, utilizarea autopentru marginile de sus și de jos nu va centra un element pe verticală, ceea ce poate fi confuz pentru începători.
Prăbușirea marjelor
Marginile verticale ale diferitelor elemente care se ating unul de celălalt (astfel nu au conținut, umplutură sau margini care le separă) se vor prăbuși, formând o singură marjă egală cu cea mai mare dintre marginile alăturate. Acest lucru nu se întâmplă pe marginile orizontale (stânga și dreapta), ci doar pe verticală (sus și jos).
Pentru a ilustra, luați următorul HTML:
Collapsing Margins
Example text.Și următoarele CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )În acest exemplu, h2elementului i se oferă o marjă inferioară de 20 px. Elementul de paragraf, care îl urmează imediat în sursă, are o marjă superioară stabilită la 10 px.
Simțul comun pare să sugereze că grosimea marjei verticale dintre h2și paragraf ar fi un total de 30 px (20 px + 10 px). Dar, din cauza colapsului marginii, grosimea reală ajunge să fie de 20 px. Acest lucru este demonstrat în stiloul încorporat de mai jos:
Deși marginile prăbușite pot părea neintuitive la prima vedere, ele sunt de fapt utile din câteva motive. În primul rând, acestea împiedică elementele goale să adauge spațiu de margine vertical, de obicei nedorit.
În al doilea rând, ele permit o abordare mai consecventă a declarării marjelor universale între elementele paginii. De exemplu, titlurile au de obicei spațiu de marjă verticală, la fel și paragrafele. Dacă marjele nu s-au prăbușit, titlurile care urmează paragrafelor (sau invers) ar necesita deseori resetarea marginilor pe unul dintre elemente pentru a obține o cantitate consistentă de spațiu vertical.
În al treilea rând, colapsul marginii se aplică și elementelor imbricate. Uită-te la următorul stilou:
Aici, elementul de paragraf are o marjă superioară setată la 30 px și este cuibărit în interiorul unui divelement cu o marjă superioară de 40 px . În plus, h2elementul are o marjă inferioară de 20 px.
Din nou, bunul simț ar sugera că spațiul total al marginii verticale aici ar fi de 90 px (20 px + 40 px + 30 px), dar în schimb marginile se prăbușesc într-o singură marjă de 40 px (cea mai mare dintre cele trei). Acest lucru este util în majoritatea cazurilor, deoarece nu este nevoie să redefiniți oricare dintre marginile superioare pentru a elimina spațiul vertical suplimentar.
Marje negative
Așa cum ați putea suspecta, în timp ce o valoare pozitivă a marjei împinge alte elemente, o marjă negativă fie va trage elementul însuși în acea direcție, fie va atrage alte elemente spre el.
Iată un exemplu de container cu căptușeală, iar antetul h2 are margini negative care se trag prin acea căptușeală înapoi la margini:
Vedeți
Cazul de utilizare cel mai frecvent al stiloului pentru margini negative de Chris Coyier (@chriscoyier)
pe CodePen.
Iată un exemplu în care primul paragraf are o marjă inferioară negativă, care atrage următorul paragraf în sus.
Consultați
paragraful de jos al marginii negative a stiloului de Chris Coyier (@chriscoyier)
pe CodePen.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lucrări | Lucrări | Lucrări | Lucrări | Lucrări | Lucrări | Lucrări |
IE6 este predispus la eroarea dublată cu margine plutitoare, care poate fi rezolvată în majoritatea cazurilor prin adăugarea display: inlinela elementul plutit.