Ce face padding
padding reprezintă perna de aer interioară din jurul textului sau conținutului unui element.
Spre deosebire de margin (care este exterior bordurii și nu are fundal), padding este acoperit de culoarea sau imaginea de fundal (background-color) a elementului.
Este esențial pentru butoane, carduri, celule de tabel și orice componentă care are nevoie ca textul să respire față de margini.
Valori uzuale
| Valoare | Descriere |
|---|---|
dimensiune (px, rem, %) |
Lățimea spațiului interior. |
padding-top / bottom |
Spațiul interior sus sau jos. |
padding-left / right |
Spațiul interior stânga sau dreapta. |
Exemple
Exemplul 1: Stilizarea unui buton cu padding generos
Padding-ul mărește zona clicabilă a butonului.
.buton {
background-color: #e34f26;
color: #ffffff;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
}Efect vizual în browser
Un buton portocaliu aerisit, cu 12px spațiu sus-jos și 24px stânga-dreapta în jurul textului.Greșeli frecvente
- Folosirea valorilor negative la padding; spre deosebire de margin, valorile negative sunt invalide în padding.
Comenzi înrudite
margin: Creează spațiu gol în exteriorul bordurii unui element, distanțându-l de elementele vecine.box-sizing: Stabilește dacă lățimea (width) și înălțimea (height) includ și spațierea interioară (padding) plus bordura (border).border: Desenează o linie de contur în jurul conținutului și padding-ului unui element (grosime, stil, culoare).