Margini CSS. Valoarea auto. Valoarea inherit. Margin Collapse. Toate proprietățiile CSS margin.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Puteți seta proprietatea marginii ca automat (auto) să centreze orizontal elementul din containerul său.
Elementul va prelua apoi lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între marginile din stânga și cea din dreapta.
Exemplu:
Folosiți margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Valoarea inherit (The inherit Value)
Acest exemplu permite ca marginea stângă a elementului <p class = "ex1"> să fie moștenită de la elementul părinte (<div>):
Exemplu:
Utilizarea valorii inherit:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
Margin Collapse
Marginile superioare și inferioare ale elementelor sunt uneori prăbușite într-o singură margine care este egală cu cea mai mare dintre cele două margini.
Acest lucru nu se întâmplă pe marginile din stânga și din dreapta! Doar marginile de sus și de jos!
Priviți următorul exemplu:
Exemplu:
Demonstrarea colapsului marginii:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
În exemplul de mai sus, elementul <h1> are marginea de jos de 50px iar elementul <h2> are marginea de sus setată la 20px.Simțul comun pare să sugereze că marginea verticală dintre <h1> și <h2> ar fi în total 70px (50px + 20px). Dar din cauza colapsului marginii, marginea reală ajunge să fie de 50px.
Toate proprietățile CSS margin
Proprietate | Descriere |
---|---|
margin | Proprietatea shorthand pentru setarea proprietăților marginii într-o singură declarație |
margin-bottom | Setează marginea de jos a unui element |
margin-left | Setează marginea stângă a unui element |
margin-right | Setează marginea dreaptă a unui element |
margin-top | Setează marginea superioară a unui element |