CSS padding svojstvo: kako napraviti polja
CSS nudi web developer ogromne mogućnosti za izradu HTML stranica. Početnicima se to može činiti teškim, ali ako ih temeljito i metodički shvatite, tehnologija stilskih listova bit će umanjena, a izgled stranica više neće biti težak. Jedno od neophodnih svojstava CSS-a je popunjavanje . Koristi se za postavljanje polja za blokove HTML stranica.
Što su blokovi?
Mjesto je izgrađeno od opeke - blokova. Osim toga, svaki element, bez obzira na njegov sadržaj, mora imati pravokutni oblik. Naime, sve slike i natpisi mentalno zaključuje programer u "kutijama", pri čemu stvara web stranicu.
Najčešće se blokovi postavljaju oznakama.
,
- , , Svojstva CSS-a primjenjuju se na svaki takav element: padding , margin , border , width i drugi. Širinu pravokutnika bloka daje svojstvo width , a svaki element se sastoji od polja koje su označene atributom border. Konačno, komponenta stranice može imati vanjske margine, ili uvlake, marginu , odvajajući je od drugog bloka. Sintaksa svojstava CSS popunjavanja
Kreatori kaskadnih listova stilova pružili su nekoliko opcija za pisanje atributa za postavljanje polja. Možete napraviti prazan prostor unutar bloka na osam različitih načina! Donja tablica prikazuje primjere za svaku od opcija i daje im kratko objašnjenje.
Primjer uporabe
razjašnjenje
obloga: 15 px;
Ako atribut slijedi jedan broj, to znači da će element imati ista polja sa svih strana. Unos px pretpostavlja da je vrijednost u pikselima. To znači da će blok imati margine od 15 piksela.
obloga: 18 px 36 px;
Prvi od dva broja označava da će okomita polja biti 18 piksela, a bočna polja dva puta veća - 36 piksela.
obloga: 6 px 12 px 18 px;
Prosjek je vrijednost polja na stranama (lijevo i desno), druga dva su okomita polja. Prvi broj (6 px) odnosi se na gornje polje, a posljednji (18 px) na donji.
obloga: 6 px 12 px 18 px 36 px;
Oblik svojstva CSS popunjavanja , u kojoj postoje četiri broja, omogućuje vam da navedete polja na svim stranama bloka. Numeričke vrijednosti dosljedno se primjenjuju na gornje polje i dalje u smjeru kazaljke na satu udesno, dolje i lijevo.
padding-left: 14 px;
Lijevi dodatak govori sam za sebe - polje će biti postavljeno samo s lijeve strane elementa.
padding-right: 14 px;
Slično prethodnoj opciji snimanja - polje će biti kreirano samo na desnoj strani bloka.
padding-top: 14 px;
Unos identificira polje na vrhu.
padding-bottom: 14 px;
Unos označava polje u nastavku.
Treba napomenuti da je zadana CSS podloga jednaka nuli. Ovaj atribut nije nasljedan, to jest, mora se postaviti za svaki blok. Osim uobičajenih i razumljivih piksela, širina praznog prostora oko blokova je dana u relativnim jedinicama. Na primjer, u gornjim primjerima možete zabilježiti 5% - kao rezultat toga, preglednik automatski izračunava širinu polja.
Kako koristiti nekretninu?
Dakle, pregledavaju se obrasci zapisivanja atributa, ali kako ih koristiti na HTML stranici? Prva je opcija "ljepša", kada sve što je vezano uz CSS tehnologiju nije napisano u HTML-u, nego je prikazano u zasebnoj datoteci s odgovarajućim nastavkom.
Druga mogućnost je da pišete izravno u oznaku < style >. CSS padding u ovom slučaju definira se na sljedeći način:
< div style = " padding: 22 px">
Kako napisati atribut - odaberite proizvođača. U svakom slučaju, potrebno je posjedovati sve načine korištenja imovine za određivanje polja kako bi se povremeno koristila.
Sintaksa svojstava CSS popunjavanja
Kreatori kaskadnih listova stilova pružili su nekoliko opcija za pisanje atributa za postavljanje polja. Možete napraviti prazan prostor unutar bloka na osam različitih načina! Donja tablica prikazuje primjere za svaku od opcija i daje im kratko objašnjenje.
Primjer uporabe | razjašnjenje |
obloga: 15 px; | Ako atribut slijedi jedan broj, to znači da će element imati ista polja sa svih strana. Unos px pretpostavlja da je vrijednost u pikselima. To znači da će blok imati margine od 15 piksela. |
obloga: 18 px 36 px; | Prvi od dva broja označava da će okomita polja biti 18 piksela, a bočna polja dva puta veća - 36 piksela. |
obloga: 6 px 12 px 18 px; | Prosjek je vrijednost polja na stranama (lijevo i desno), druga dva su okomita polja. Prvi broj (6 px) odnosi se na gornje polje, a posljednji (18 px) na donji. |
obloga: 6 px 12 px 18 px 36 px; | Oblik svojstva CSS popunjavanja , u kojoj postoje četiri broja, omogućuje vam da navedete polja na svim stranama bloka. Numeričke vrijednosti dosljedno se primjenjuju na gornje polje i dalje u smjeru kazaljke na satu udesno, dolje i lijevo. |
padding-left: 14 px; | Lijevi dodatak govori sam za sebe - polje će biti postavljeno samo s lijeve strane elementa. |
padding-right: 14 px; | Slično prethodnoj opciji snimanja - polje će biti kreirano samo na desnoj strani bloka. |
padding-top: 14 px; | Unos identificira polje na vrhu. |
padding-bottom: 14 px; | Unos označava polje u nastavku. |
Treba napomenuti da je zadana CSS podloga jednaka nuli. Ovaj atribut nije nasljedan, to jest, mora se postaviti za svaki blok. Osim uobičajenih i razumljivih piksela, širina praznog prostora oko blokova je dana u relativnim jedinicama. Na primjer, u gornjim primjerima možete zabilježiti 5% - kao rezultat toga, preglednik automatski izračunava širinu polja.
Kako koristiti nekretninu?
Dakle, pregledavaju se obrasci zapisivanja atributa, ali kako ih koristiti na HTML stranici? Prva je opcija "ljepša", kada sve što je vezano uz CSS tehnologiju nije napisano u HTML-u, nego je prikazano u zasebnoj datoteci s odgovarajućim nastavkom.
Druga mogućnost je da pišete izravno u oznaku < style >. CSS padding u ovom slučaju definira se na sljedeći način:
< div style = " padding: 22 px">
Kako napisati atribut - odaberite proizvođača. U svakom slučaju, potrebno je posjedovati sve načine korištenja imovine za određivanje polja kako bi se povremeno koristila.