HTML5 - Punjenje

The punjenje u HTML -u nam omogućuje generiranje razmaka između sadržaja i rubova okvira koji ih sadrži, na taj način elementu možemo dati zrak i postići zanimljive grafičke efekte.

• Podstava s podlogom: Inicijalizira padding za gornji rub, njegova mjerenja su izražena u duljini ili u postocima.
• Odstupanje desno: Inicira padding za desni rub, njegova mjerenja su izražena u duljini ili u postocima.
• Podložak: Inicijalizira padding za donji rub, njegova mjerenja su izražena u duljini ili u postocima.
• Rubovi lijevo: Inicijalizira padding za lijevi rub, njegova mjerenja su izražena u duljini ili u postocima.
• Punjenje: Ovaj nam prečac pomaže da obavimo inicijalizaciju paddinga sa svim njegovim granicama u jednom retku.

Nešto važno što moramo ograničiti prilikom inicijalizacije a punjenje Korištenje postotnih mjerenja je da će se taj postotak uzeti samo na temelju širine elementa, nikako na visini.
Pogledajmo sada s jednostavnim kodom kako primijeniti a punjenje u našem HTML5 dokumentu.

 Primjer
Postoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.

Kao što možemo vidjeti iz ovog koda, možemo istaknuti prilično zanimljive stvari, ako pomno pogledamo, već smo primijenili druge stilove na element kojem dodajemo, odnosno možemo se pomiješati s drugim elementima kako bismo dobili rezultat, možemo također vidjeti da koristimo mjernu jedinicu em umjesto pxIako su oboje kompatibilni, pitanje je da možemo vidjeti njihovu svestranost; konačno da vidimo kako ovo izgleda u našem pregledniku:

Pogledajmo sada kako primijeniti prečac za inicijalizaciju našeg punjenje u jednom retku, za to je redoslijed mjerenja paddinga sljedeći: Gore, Desno, Dolje, Lijevo; Osim toga, kad izostavljamo vrijednosti, druga se vrijednost prilagođava onoj koja nije izostavljena, na primjer ako izostavimo lijevu, ona će uzeti vrijednost desne, ako izostavimo donju, ona će uzeti vrijednost gornje, ako stavimo samo jednu vrijednost, četiri strane će uzeti istu vrijednost.
Pokazat ćemo svu ovu teoriju kodeksom prakse, da vidimo kako implementiramo padding u jednom retku na vrlo jednostavan način.

 Primjer
Postoji mnogo različitih vrsta voća - samo preko 500 vrsta banana postoji. Dok dodamo bezbroj vrsta jabuka, naranči i drugog dobro poznatog voća, suočeni smo s tisućama izbora.

Kao što vidimo, deklaracija paddinga se ne mijenja puno i spremamo nekoliko redaka, pogledajmo kako bi to izgledalo u pregledniku:

U ovom elementu stvaramo ga s prilično nepravilnim obrubom, da nismo primijenili zapušavanje granica bi presrela tekst, izvršila promjenu i provjerila u preglednicima da vidi razliku.
Ovim smo završili naš vodič za HTML5 padding, sada možemo stvoriti razmake unutar elemenata koji sadrže naš sadržaj u HTML dokumentu, a ono što nam preostaje je vježbati sve dok ne savladamo ono što smo naučili u ovom vodiču.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod