Umplutura CSS permite unui codificator HTML să seteze umplutura implicită sau spațiul mort în afara unui element HTML. Beneficiul de a face acest lucru este că îl scutește pe programator de a repeta acel cod de umplutură pentru fiecare instanță a acelui element și creează mai ușor consecvența paginii. Elementul HTML care trebuie completat poate fi orice număr de lucruri, cum ar fi un paragraf, un tabel sau un titlu.
Pentru a crea umplutură în CSS, mai întâi va trebui să identificați elementul HTML pe care doriți să îl completați. Acest element pe care doriți să-l tamponați este cunoscut sub numele de selector. Apoi, veți dori să specificați valorile de umplutură adecvate. Există cinci tipuri diferite de proprietăți de umplutură în CSS – unul pentru toate cele patru laturi ale unui element simultan și alte patru pentru fiecare parte individuală a elementului (de exemplu, partea stângă, partea dreaptă, partea superioară sau partea inferioară) ). O proprietate care permite programatorului să specifice valori pentru toate cele patru laturi ale unui element HTML simultan se numește o proprietate scurtă.
Limbajul de codare folosit pentru a specifica o declarație de umplutură CSS este pur și simplu cuvântul „padding”. În urma acelei etichete, sunt „valorile” relevante ale umpluturii sau, informații despre cantitatea de spațiu dorită, reprezentate de obicei fie prin pixeli, fie printr-un procent. Umplutura și valorile sunt scrise între acolade sau paranteze (adică, „{” și „}”). Înainte de toate acestea este elementul HTML care trebuie completat (de exemplu, „p” pentru paragraful sau „H2” pentru anteturile de nivelul 2).
În ceea ce privește modul în care este reprezentată valoarea, valorile pot fi reprezentate în pixeli (de exemplu, 1px sau 5px), puncte (de exemplu, 1pt sau 5pt) sau inci (de exemplu, 1in sau 5in) sau centimetri (de exemplu, 1cm sau 5cm) . Valorile pot fi declarate și ca procent din elementul HTML care este stilat. Dacă valoarea este de 50%, de exemplu, umplutura va fi egală cu jumătate din dimensiunea elementului.
Următoarele exemple sunt codul HTML pentru completarea unui element HTML prin intermediul valorilor reflectate în procent și, respectiv, lungime. Dacă este atribuită o singură valoare, atunci browserele web vor atribui această umplutură tuturor celor patru laturi ale elementului HTML.
umplutura:10%;
padding: 100px;
Adăugarea mai multor valori la tipul de declarație de umplutură de mai sus va determina browserele web să le interpreteze într-un anumit mod. Dacă sunt atribuite două valori, prima va corespunde sus și jos, în timp ce a doua corespunde stânga și dreapta. Trei valori vor face ca prima să se refere la partea de sus, a doua la partea stângă și dreapta și a treia la partea de jos a elementului HTML. Atribuirea unui maxim de patru valori face ca prima, a doua, a treia și a patra valori să corespundă cu partea de sus, dreapta, jos și stânga a elementului HTML, în această ordine. Când sunt furnizate mai multe valori, acestea ar trebui separate prin spații și se termină cu punct și virgulă, de exemplu:
umplutură: 10px 20px 10px 20px;
Umplutura în CSS se poate face și pe o parte la un moment dat. În acest sens, există încă patru proprietăți de umplutură disponibile. Acestea sunt padding-top, padding-dreapta, padding-bottom și padding-stânga. Pentru a crea umplutură în CSS în acest mod mai precis, va trebui să etichetați proprietățile cu aceeași sintaxă ca și declarațiile scurte ca mai sus. Fiecare dintre aceste proprietăți de umplutură ia o singură valoare fie în lungime, fie în procent. De exemplu:
căptușeală: 10 px;
padding-dreapta:20px;
padding-bottom:10px;
padding-stânga:20px;
Următorul cod creează o pagină web, declară proprietățile de umplutură între etichetele de stil și apoi le utilizează într-un element de paragraf specificat de eticheta p. Textul dintre /* și */ sunt note pentru a explica tipul de umplutură folosit și nu ar fi inclus în codul de umplutură CSS.
Acest text are aceeași umplutură pe fiecare parte. Captuseala pe fiecare parte este de 10px.
Acest text are o umplutură de sus și de jos de 50 px și o umplutură la stânga și la dreapta de 30 px.
Acest text are o umplutură de sus de 10 px, una de la dreapta de 20 px, una de jos de 10 px și una din stânga de 20 px.
În exemplul de mai sus, „example1” etc., sunt nume atribuite unei clase, care sunt apoi menționate în paragrafe. Perioada dintre eticheta p și numele clasei de la începutul codului denotă o declarație a unei clase atribuite unui paragraf. Observați acoladele după declarația de clasă care include atribuirea valorii proprietății de umplutură.
Deși acest lucru ar putea părea o mulțime de muncă, este mult mai puțin laborioasă decât specificarea umpluturii pentru fiecare paragraf individual. Puteți declara o proprietate de umplutură pentru elementul dorit, care în exemplul de mai sus este eticheta p, și apoi faceți referire la clasă atunci când utilizați elementul dintre etichetele body ale paginii. Dacă este nevoie de un singur tip de umplutură pentru toate paragrafele, nu trebuie să folosiți deloc clase. Pur și simplu utilizați următorul cod între etichetele de stil și apoi codificați paragrafele fără a specifica nicio clasă. Acest cod ar merge între etichetele body în loc de codul din exemplul de mai sus.
p {padding:10px 20px 10px 20px;}
Această completare CSS pe care aceasta ar crea ar afecta toate paragrafele, chiar dacă nu a fost specificată nicio clasă.