Margini CSS. Valoarea auto. Valoarea inherit. Margin Collapse. Toate proprietățiile CSS margin.

Valoarea auto (The auto Value)

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