Ce face margin
margin controlează spațiul liber din jurul elementului. Nu are culoare proprie și este complet transparent.
Poți seta fiecare latură individual (margin-top, margin-right, margin-bottom, margin-left) sau toate printr-o scurtătură.
Două concepte esențiale:
1. Centrarea orizontală: un element de tip bloc cu o lățime definită poate fi centrat perfect pe pagină cu margin: 0 auto.
2. Colapsarea marginilor: marginile verticale ale două paragrafe vecine nu se adună, ci se suprapun (se aplică doar cea mai mare dintre ele).
Valori uzuale
| Valoare | Descriere |
|---|---|
dimensiune (px, rem, %) |
Valori numerice pentru mărimea spațiului. |
auto |
Browserul împarte egal spațiul rămas (folosit pentru centrare orizontală). |
margin-top / bottom |
Spațierea exterioară de sus sau de jos. |
margin-left / right |
Spațierea exterioară din stânga sau din dreapta. |
Exemple
Exemplul 1: Centrarea unui container pe mijlocul ecranului
margin: 0 auto centrează orice cutie cu lățime maximă setată.
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 0 16px;
}Efect vizual în browser
Containerul este poziționat fix pe mijlocul ferestrei, cu spații egale în stânga și dreapta.Greșeli frecvente
- Încercarea de a centra un element inline (cum ar fi sau ) cu margin: auto (margin: auto funcționează doar pe elemente de tip bloc cu width definit).
- Ignorarea colapsării marginilor verticale (dacă un bloc are margin-bottom: 20px și următorul are margin-top: 30px, distanța reală va fi 30px, nu 50px).
Comenzi înrudite
padding: Creează spațiu interior între conținutul elementului și bordura sa, preluând culoarea de fundal a elementului.box-sizing: Stabilește dacă lățimea (width) și înălțimea (height) includ și spațierea interioară (padding) plus bordura (border).width și height (min/max): Controlează dimensiunile orizontale și verticale ale unui element, inclusiv limitele minime și maxime permise.