Căptușeala CSS este una dintre proprietățile Modelul cutiei CSS. Această proprietate stenogramă setează umplerea în jurul tuturor celor patru laturi ale unui element HTML. Căptușeala CSS poate fi aplicată aproape tuturor Etichetă HTML (cu excepția unora dintre etichetele tabelului). În plus, toate cele patru laturi ale elementului pot avea o valoare diferită.
Proprietate de umplere CSS
Pentru a utiliza proprietatea de umplere CSS, puteți utiliza mnemonicul „TRouBLe” (sau „TRiBbLe” pentru fanii dvs. Star Trek). Aceasta înseamnă top, dreapta, fund, și stânga, și se referă la ordinea lățimilor de umplere setate în proprietatea stenogramă. De exemplu:
umplutură: sus dreapta jos stânga;
umplutură: 1px 2px 3px 6px;
Dacă ați utiliza valorile enumerate mai sus, aceasta ar aplica o valoare de umplere diferită pentru fiecare parte a oricărui element HTML la care îl aplicați. Dacă doriți să aplicați aceeași căptușeală pe toate cele patru părți, vă puteți simplifica CSS și scrieți doar o valoare:
umplutură: 12 px;
Cu acea linie de CSS, 12 pixeli de umplutură s-ar aplica tuturor celor 4 laturi ale elementului.
Dacă doriți ca umplutura să fie aceeași pentru partea de sus și de jos și pentru stânga și dreapta, puteți scrie două valori:
umplutură: 24px 48px;
Prima valoare (24 px) se va aplica în partea de sus și în jos, în timp ce a doua se va aplica în stânga și în dreapta.
Dacă scrieți trei valori, aceasta va face că umplutura orizontală (stânga și dreapta) la fel, în timp ce schimbați partea de sus și de jos:
căptușeală: sus dreapta și stânga jos;
umplutură: 0px 1px 3px;
Conform modelului casetei CSS, umplutura este cea mai apropiată de elementul / conținutul în sine. Aceasta înseamnă că umplerea este adăugată la un element între lățimea sau înălțimea conținutului și valorile de margine pe care le utilizați. Dacă umplutura este setată la zero, atunci are aceeași margine ca și conținutul.
Valori de umplere CSS
Completarea CSS poate lua orice valoare de lungime non-negativă. Asigurați-vă că specificați măsurarea, cum ar fi px sau em. De asemenea, puteți specifica un procent pentru umplutura dvs., care va fi un procent din lățimea blocului care conține elementul. Aceasta include căptușeala superioară și inferioară. De exemplu:
#container {width: 800px; înălțime: 200px; }
#container p {width: 400px; înălțime: 75%; umplutură: 25% 0; }
înălţime a paragrafului din interiorul #container elementul va fi 75% din #containerÎnălțimea plus 25% din lățimea pentru căptușeala superioară și 25% din lățimea pentru căptușeala inferioară. Acest lucru totalizează 300 + 200 + 200 = 700 px.
Efectele adăugării căptușirii CSS
Pe elemente la nivel de bloc, căptușeala se aplică pe cele patru laturi. Deoarece elementul este deja un bloc sau o cutie, căptușeala se aplică pe laturile cutiei.
Când se adaugă padding CSS la elemente inline, pot exista unele suprapuneri ale elementelor deasupra și dedesubtul elementului în linie dacă umplutura verticală depășește înălțimea liniei, dar nu va împinge înălțimea liniei în jos. Completarea orizontală CSS aplicată elementelor în linie va fi adăugată 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, deci nu puteți utiliza umplutura pentru a indenta un segment de conținut cu mai multe linii.
De asemenea, în CSS2.1, nu puteți crea blocuri de containere în care lățimea depinde de un element cu procente pentru lățimi (sau lățimi de umplere). Dacă faceți 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ă vă gândiți la asta, este logic, ca și cum elementul containerului dvs. ar trebui să cunoască lățimea elementelor sale copil pentru a-și defini lățimea - cum ar fi atunci când nu are o lățime predefinită și unul sau mai mulți au o lățime setată ca procent din elementul containerului, acest lucru stabilește un lanț circular fără Răspuns. Dacă utilizați procentaje pentru lățimile de pe documentul dvs., trebuie să vă asigurați că lățimile elementului părinte sunt definite și ele.