Suprafața CSS este una dintre proprietățile modelului de cutie CSS . Această proprietate prescurtată stabilește umplutura în jurul tuturor celor patru laturi ale unui element HTML. Suprafața CSS poate fi aplicată aproape la fiecare etichetă HTML (cu excepția anumitor etichete de tabelă). În plus, toate cele patru laturi ale elementului pot avea o valoare diferită.
CSS Padding Property
Pentru a utiliza proprietatea de ștampilă CSS, puteți folosi mnemonicele "TRouBLe" (sau "TRiBbLe" pentru fanii Star Trek). Aceasta reprezintă topul , dreapta , fundul și stânga și se referă la ordinea lățimilor de umplutură pe care le-ați setat în proprietatea prescurtată. De exemplu:
umplutură: partea din dreapta sus stânga; umplutura: 1px 2px 3px 6px;Dacă ați folosit valorile enumerate mai sus, s-ar aplica o valoare de umplutură diferită pentru fiecare parte a elementului HTML pe care îl aplicați. Dacă doriți să aplicați aceeași umplutură pe toate cele patru părți, puteți să vă simplificați CSS-ul și să scrieți doar o singură valoare:
padding: 12px;Cu această linie de CSS, 12 pixeli de umplutură s-ar aplica tuturor celor patru laturi ale elementului.
Dacă doriți ca vopseaua să fie aceeași pentru partea superioară și cea inferioară și spre stânga și la dreapta, puteți scrie două valori:
padding: 24px 48px;Prima valoare (24px) se aplică în partea superioară și inferioară, în timp ce cea de-a doua se aplică în stânga și în dreapta.
Dacă scrieți trei valori, ceea ce va face ca paddingul orizontal (la stânga și la dreapta) să fie același, în timp ce schimbați partea superioară și cea de jos:
padding: partea de sus dreapta și stânga; umplutură: 0px 1px 3px;Conform modelului cutie CSS, umplutura este cea mai apropiată de elementul / conținutul în sine. Aceasta înseamnă că umplutura este adăugată unui element între lățimea sau înălțimea conținutului și orice valori de frontieră pe care le utilizați. Dacă umplutura este setată la zero, aceasta are aceeași margine cu conținutul.
Valorile CSS de blocare
Suprafața CSS poate lua orice valoare de lungime ne-negativă. Asigurați-vă că specificați măsurătorile, cum ar fi px sau em. De asemenea, puteți specifica un procentaj pentru umplutura dvs., care va fi un procent din lățimea blocului care conține elementul. Acest lucru include pentru padding de sus și de jos. De exemplu:
#container {width: 800px; înălțime: 200px; } #container p {lățime: 400px; înălțime: 75%; umplutură: 25% 0; }Înălțimea paragrafului din interiorul elementului #container va fi de 75% din înălțimea #containerului plus 25% din lățimea plăcii superioare și 25% din lățimea plăcii de fund. Acest total este 300 + 200 + 200 = 700px.
Efectele Adăugării CSS Padding
La elementele de bloc , stratul se aplică pe cele patru laturi. Deoarece elementul este deja un bloc sau o cutie, umplutura este aplicată pe partea laterală a cutiei.
Atunci când se adaugă elemente de inserție CSS în elementele inline , pot exista unele suprapuneri ale elementelor de deasupra și dedesubtul elementului inline, dacă peretele vertical depășește înălțimea liniei, dar nu va împinge înălțimea liniei în jos. Canturile CSS orizontale aplicate elementelor inline vor fi adăugate la începutul elementului și la sfârșitul elementului. Și căptușeala poate înfășura linii. Dar nu se va aplica tuturor liniilor unui element cu mai multe linii, astfel încât să nu puteți utiliza căptușeala pentru a introduce un segment de conținut inline multi-linie.
De asemenea, în CSS2.1, nu puteți crea blocuri de containere în cazul în care lățimea depinde de un element cu procente pentru lățimi (sau lățimi de umplutură). Dacă faci rezultatul este nedefinit. Browserele vor afișa în continuare conținutul, dar este posibil să nu obțineți rezultatele pe care le așteptați. Dacă te gândești la asta, are sens, ca și cum elementul tău container trebuie să cunoască lățimea elementelor copilului pentru a-și defini lățimea - cum ar fi atunci când nu are o lățime predefinită și una sau mai multe o lățime stabilită ca procent din elementul containerului, aceasta stabilește un lanț circular fără răspuns. Dacă utilizați procente pentru lățimi de orice pe documentul dvs., trebuie să vă asigurați că sunt definite și lățimile elementului părinte.