Proprietatea marjei CSS: indentarea exterioară a elementelor

Proprietatea marginii CSS controlează crestăturile exterioare ale elementului. Folosind-o, puteți seta distanța dintre blocurile vecine sau puteți deplasa nodul copil de la limita părintelui. Marginile nu participă la modelul bloc al CSS și nu intră în lățimea și înălțimea elementului.

Proprietatea Syntax

Există o proprietate comună a marjei CSS, cu care puteți specifica valoarea tuturor liniilor simultan, precum și patru proprietăți separate pentru fiecare parte:

• margine-stânga;
• -Marginea din dreapta;
• margin-top;
• margin-bottom.

Puteți stabili valoarea liniuței în pixeli, unități relative (em, rem) sau procente. În acest din urmă caz, pentru 100%, lățimea elementului părinte va fi întotdeauna acceptată, chiar și pentru părțile superioare și inferioare.

părinte {width: 500px; height: 100px;} copil {margin-left: 10% - // 500px * 10% = 50pxmargin-top: 10% - // 500px * 10% = 50px}

Marja CSS poate fi negativă.

Când utilizați sintaxa de grup, trebuie să transferați de la unul la patru parametri, listarea părților în ordinea corectă.

• Unul: pentru toate părțile deodată.
• Două: pentru partea superioară și cea de jos și separat pentru laturi.
• Trei: pentru partea de sus, partea laterală și partea inferioară.
• Patru: enumerați laturile în sensul acelor de ceasornic, începând de sus.

Element {margin: 20px;} e {margin: 20px 30px;} e {margin: 20px 30px 40px;} Element {margin: 20px 30px 40px 50px;}

Algoritmi de indentare

Proprietatea marjei CSS nu este moștenită și este zero în mod implicit. Se pare că inițial niciun element de pe pagină nu ar trebui să aibă indici exteriori, dar nu este. Navigatorii din proprie inițiativă stabilesc formatul pentru un număr de etichete, de exemplu, liste. Este important să luați acest lucru în considerare atunci când faceți planificarea.

Specificația definește comportamentul marjelor pentru noduri cu diferite tipuri de cartografiere. Astfel, elementele de linie ignoră valoarea indentării de sus și de jos, chiar dacă sunt specificate explicit pentru a nu rupe structura liniei.

Blocurile și blocurile de sfoară afișează în mod adecvat margini pe toate cele patru laturi, dar în unele cazuri comportamentul acestei proprietăți poate fi neașteptat.

Colapsul marjelor

Imaginea prezintă două elemente amplasate una deasupra celeilalte, cu setările exterioare externe. În prima variantă, se combină marginile inferioare și superioare ale blocurilor, în al doilea - se adună împreună. Ce tip de comportament pare mai logic?

Elementele de blocare din CSS se comportă conform primului tip, iar blocul de linie și containerele flexibile - pe cel de-al doilea. În acest caz se prăbușesc numai liniuțele verticale, în timp ce cele orizontale se adună întotdeauna.

Eliminarea marginii din părinți

Nodurile blocului au încă o înclinație: în unele cazuri, marginalul unui element copil poate fi transportat în afara containerului părinte. Acest lucru se întâmplă dacă elementul de indentare nu este separat de limita strămoșilor de nici un alt element, nod text, cadru sau umplutură.

Imaginea prezintă blocul pentru copii, care era îndoit în așteptarea că se va depărta de limita superioară a containerului părinte. În schimb, marginea a fost scoasă din limitele părinților și a împins-o departe de granița strămoșului cel mai în vârstă.

Dacă părintele are un cadru, o umplutură sau o proprietate de depășire egală cu cea ascunsă sau defilați, îndepărtarea marjei nu are loc.

Alinierea centrului

Există un truc cunoscut care vă permite să aliniați elementul bloc în centrul părintelui cu ajutorul unor linii exterioare. Pentru a face acest lucru, trebuie să setați lățimea și să setați marginile stânga și dreapta la auto.

element {lățime: 400px; margine: 0 auto-}

În acest caz, există o redistribuire a spațiului liber în mod egal pe ambele părți ale elementului. Aceasta funcționează numai pentru nodurile de tip bloc cu o anumită lățime. Dacă nu setați mărimea, elementul de bloc se extinde la întregul container, fără a lăsa spațiu pentru indentare.