HTML5 - Căptușire

căptușeală în HTML ne permite să generăm un spațiu între conținut și marginile casetei care le conține, în acest fel putem da elementului aer și putem obține efecte grafice interesante.

• Căptușeală: Inițializează umplutura pentru marginea superioară, măsurătorile sale sunt exprimate în lungime sau în procente.
• Căptușire-dreapta: Inițializează umplutura pentru marginea dreaptă, măsurătorile sale sunt exprimate în lungime sau în procente.
• Umplutură de fund: Inițializează umplutura pentru marginea inferioară, măsurătorile sale sunt exprimate în lungime sau în procente.
• Căptușire stânga: Inițializează umplutura pentru marginea stângă, măsurătorile sale sunt exprimate în lungime sau în procente.
• Garnitura: Această comandă rapidă ne ajută să inițializăm umplutura cu toate marginile sale într-o singură linie.

Ceva important pe care trebuie să-l limităm atunci când facem inițializarea unui căptușeală Utilizarea măsurătorilor procentuale înseamnă că acest procent va fi luat numai pe baza lățimii elementului, niciodată pe înălțime.
Să vedem acum cu un cod simplu cum să aplicați un căptușeală în documentul nostru HTML5.

 Exemplu
Există o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.

După cum putem vedea din acest cod, putem evidenția lucruri destul de interesante, dacă ne uităm cu atenție, am aplicat deja alte stiluri elementului la care suntem căptușite și adică ne putem amesteca cu alte elemente pentru a obține rezultatul nostru, putem vezi, de asemenea, că folosim unitatea de măsură em in loc de pxDeși cele două sunt compatibile, este o întrebare că putem vedea versatilitatea lor; în cele din urmă, să vedem cum arată acest lucru în browserul nostru:

Acum să vedem cum să aplicăm comanda rapidă pentru a inițializa căptușeală într-o singură linie, pentru aceasta ordinea măsurătorilor de umplere este următoarea: Sus, Dreapta, Jos, Stânga; În plus, atunci când omitem valori, cealaltă valoare este ajustată la cea neomisă, de exemplu, dacă omitem stânga, va lua valoarea din dreapta, dacă omitem cea inferioară, va lua valoarea din cea superioară, dacă plasăm doar o valoare, cele patru laturi vor lua aceeași valoare.
Vom demonstra toată această teorie cu un cod de practică, să vedem cum implementăm căptușeala într-o singură linie într-un mod foarte simplu.

 Exemplu
Există o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.

După cum putem vedea, declarația de umplere nu se schimbă prea mult și salvăm câteva linii, să aruncăm o privire asupra modului în care ar arăta în browser:

În acest element îl creăm cu o margine destul de neregulată, dacă nu am fi aplicat umplutura, marginea ar fi interceptat textul, faceți modificarea și verificați în browserele dvs. pentru a vedea diferența.
Cu aceasta ne-am terminat tutorialul de umplere HTML5, putem crea acum spații în elementele care conțin conținutul nostru în documentul HTML, iar ceea ce ne-a mai rămas este să continuăm să exersăm până când am însușit ceea ce am învățat în acest tutorial.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv