CSS padding svojstvo: kako napraviti polja

10. 5. 2019.

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.

css padding

Š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.

padding do css

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.

stil CSS padding

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.