paddingProprietatea în CSS definește porțiunea cea mai interioară a modelului caseta, crearea unui spațiu în jurul conținutului unui element, în interiorul unor marje și / sau frontiere definite.
Valorile de umplere sunt setate folosind lungimi sau procente și nu pot accepta valori negative. Valoarea inițială sau implicită pentru toate proprietățile de umplere este 0.
Iată un exemplu simplu:
.box ( padding: 0 1.5em 0 1.5em; )Exemplul de mai sus utilizează paddingproprietatea de scurtare, care acceptă până la patru valori, prezentate aici:
.box ( padding: || || || )Dacă sunt setate mai puțin de patru valori, valorile lipsă sunt asumate pe baza celor definite. De exemplu, următoarele două seturi de reguli ar obține rezultate identice:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Astfel, dacă este definită o singură valoare, aceasta setează toate cele patru proprietăți de umplere la aceeași valoare:
.box ( padding: 20px; )Dacă sunt declarate trei valori, este padding: (top) (left-and-right) (bottom);.
Oricare dintre proprietățile individuale de umplere poate fi declarată folosind mâna lungă, caz în care ați defini o singură valoare per proprietate. Deci, exemplul anterior ar putea fi rescris după cum urmează:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Calcularea umplerii și a lățimii elementelor
Dacă un element are o lățime specificată, orice umplutură adăugată la acel element se va adăuga la lățimea totală a elementului. Acesta este adesea un rezultat nedorit, deoarece necesită ca lățimea unui element să fie recalculată de fiecare dată când este ajustată umplutura. (Rețineți că acest lucru se întâmplă și cu înălțimea, dar în majoritatea cazurilor este de preferat să nu acordați unui element o înălțime stabilită.)
De exemplu:
.box ( padding: 20px; width: 400px; )În acest exemplu, deși .boxelementului i se oferă o lățime explicită de 400 px, lățimea redată efectivă a elementului de pe pagină va fi de 440 px. Acest lucru ia în considerare nu numai lățimea de 400 px, ci și 20 px de umplere la stânga și 20 px de umplere la dreapta (definită cu stenograma de umplere în exemplul anterior).
Acest lucru se întâmplă pentru a menține 400 px de spațiu de conținut, mai degrabă decât 400 px din lățimea totală a elementului. Iată un stilou care demonstrează acest lucru:
Acest lucru se întâmplă în toate browserele utilizate, în modul standard, dar nu va apărea în IE6 și IE7 în modul quirks (adică pe paginile afișate în IE6 sau IE7 în care nu există niciun tip de document declarat sau unde se întâmplă altceva pentru a declanșa ciudățenii modul).
Pentru a rezolva această problemă, păstrând astfel lățimea la 400 px, indiferent de cantitatea de umplutură, puteți utiliza box-sizingproprietatea:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Acest lucru face ca elementul să-și mențină lățimea în timp ce crește umplutura, reducând astfel spațiul de conținut disponibil. Iată o demonstrație:
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Da | Da | Da | Da | Da | Da | Da |