Prin proprietatea margin, se definește cât spațiu trebuie lăsat neocupat în afara elementului.
Atunci când margin are o singură valoare, se pune acel spațiu în toate direcțiile.
Dacă sunt mai multe, în sistemul de scriere stânga-dreapta, se aplică următoarele:
margin: «sus» «dreapta» «jos» «stânga»;
margin: «sus» «dreapta+stânga» «jos»;
margin: «sus+jos» «dreapta+stânga»;
Ca să îmi amintesc, eu mă gândesc la ceasurile cu limbi. Prima valoare este cea de sus (ora 12), urmată de cea din dreapta (ora 3), jos (ora 6) și stânga (ora 9).
Dacă ultima valoare, pentru stânga, nu este explicit dată, se va da valoarea din direcția opusă, dreapta.
Dacă valoarea pentru jos nu este dată, se va da valoarea din direcția opusă, sus.
Dacă o singură valoare este dată, se va seta aceeași margine în toate direcțiile.
Există proprietăți care aplică spațiul doar într-o direcție.
Folosind direcțiile absolute, acestea ar fi: margin-top margin-bottom margin-left margin-right
Dar este indicat să folosim direcțiile generice:
| Proprietate | Marginea (În sistemele de scriere de la stânga la dreapta) |
|---|---|
| margin-block | sus și jos |
| margin-block-start | sus |
| margin-block-end | jos |
| margin-inline | stânga și dreapta |
| margin-inline-start | stânga |
| margin-inline-end | dreapta |
Toate proprietățile legate de margine, pot primi și cuvântul cheie auto, care va face Browserul să calculeze automat valoarea. Browserul va încerca să pună marginea maximă pe care o poate pune.
Când cerem margine automată în două direcții paralele (stânga+dreapta sau sus+jos), browserul va face ambele margini egale. Cu alte cuvinte, asta ne permite să centrăm un element pe orizontală:
margin-inline: auto;
⚠ Atenție: elementul trebuie să aibă o lățime (width) setată.
Uneori marginile elementelor succesive se combină. În special marginea superioară (top/block-start) și inferioară (bottom/block-end), a elementelor de tip block.
Iată următorul scenariu:
<p style="margin-block-end: 2rem;">Acesta este un paragraf</p>
<p style="margin-block-start: 3rem;">Acesta este alt paragraf</p>
Din cauza combinării marginilor, distanța dintre paragrafe va fi de 3rem (maximul), nu 5 (suma).
Uneori, se poate combina marginea unui element cu marginea părintelui.
În limba Engleză, deci și în Romgleza vorbită de obicei de către programatorii Români, acest concept se numește margin collapse, dar am considerat că în limba Română sună prea ridicol „prăbușirea marginilor”. La interviuri, e alegerea ta ce termen folosești.
Nu se face combinarea marginilor în Flex sau Grid.
© Toate drepturile rezervate. Programming Gurus SRL.