Informatică Dezvoltare web
Diferenta intre padding si margin in CSS
Padding și margin sunt proprietăți CSS care controlează spațiul în jurul elementelor, dar padding se referă la spațiul interior dintre conținut și bordura elementului, iar margin la spațiul exterior dintre bordură și alte elemente. De exemplu, padding: 10px; adaugă 10 pixeli în interiorul unui div, iar margin: 20px; adaugă 20 de pixeli în exterior.
Definiții și formule
- Padding Padding este spațiul dintre conținutul unui element și bordura sa; se măsoară în pixeli sau alte unități, de exemplu padding: 15px; pentru toate laturile.
- Margin Margin este spațiul dintre bordura unui element și elementele învecinate; poate fi setat individual pentru fiecare latură, cum ar fi margin-top: 5px;.
- Modelul cutiei CSS Elementele HTML sunt reprezentate ca cutii cu conținut, padding, border și margin; formula totală a lățimii este width + padding + border + margin.
Exemple practice
- Exemplu cu padding div { padding: 10px; border: 2px solid black; } - conținutul div-ului va avea 10 pixeli de spațiu în interior față de bordură.
- Exemplu cu margin p { margin: 20px; } - paragraful va avea 20 de pixeli de spațiu în exterior față de alte elemente.
- Diferența vizuală Dacă un element are padding mare, conținutul său pare mai îndepărtat de margini; dacă are margin mare, întregul element este mai departe de celelalte.
Folosește inspectorul de browser pentru a vedea cum padding și margin afectează layout-ul în timp real.