CSS padding svojstvo: kako napraviti polja

CSS nudi web developeru ogromne mogućnosti za dizajniranje HTML stranica. Newbie oni izgledaju složeni, ali ako pažljivo i metodički nositi s njima, tehnologija stilova će se raspasti, izgled stranica će prestati donositi poteškoće. Jedno od neophodnih svojstava CSS-paddinga. Koristi se za određivanje polja blokova HTML stranica.

Koji su blokovi?

Stranica je izgrađena od blokova blokova. Istodobno, svaki element, bez obzira na njegov sadržaj, trebao bi imati pravokutni oblik. To jest, sve slike i natpisi mentalno se sastoje od developera u kutiji, s kojim on kreira web stranicu.


Često su blokovi označeni,

-

. Svaki takav element koristi svojstva CSS-a: padding, margin, border, width i druge. Širinu bloka pravokutnika daje svojstvo width, zatim svaki element izrađuje polje koje je označeno pomoću atributa border. Konačno, komponenta stranice može imati vanjska polja, ili udubljenja - rub koji ga odvaja od drugog bloka.

Sintaksa CSS popunjavanja svojstava

Stvoritelji Cascading Style Sheets-a pružili su nekoliko mogućnosti 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 opciju i daje im kratko objašnjenje.




Primjer uporabe



Objašnjenje



padding: 15 px;



Ako nakon atributa slijedito znači da će element imati ista polja na svim stranama. Px zapis pretpostavlja da je vrijednost postavljena u pikselima. To znači da će na kraju blok imati polja od 15 piksela.



obloga: 18 px 36 px;



Prvi od dva broja označava da će okomita polja iznositi 18 piksela, a stranice su dvostruko veće od 36 piksela.



obloga: 6 px 12 px 18 px;



Prosječni broj je vrijednost polja na stranama (lijevo i desno), a druga dva su vertikalna polja. U ovom slučaju, prvi broj (6 px) odnosi se na gornje polje, a posljednji (18 px) - na dno.



obloga: 6 px 12 px 18 px 36 px;



Svojstvo CSS popunjavanja, u kojem su prisutna četiri broja, omogućuje vam da navedete polja na svim stranama bloka. Numeričke vrijednosti se primjenjuju uzastopno na gornje polje, a zatim u smjeru kazaljke na satu - desno, dolje i lijevo.



padding-left: 14 px;



Izjava ostavljena da govori sama za sebe - polje će biti postavljeno samo lijevo od elementa.



padding-right: 14 px;



Slično prethodnom zapisu, polje će se stvoriti samo na desnoj strani bloka.



padding-top: 14 px;



Zapis definira polje odozgo.



padding-bottom: 14 px;



Zapis definira okvir ispod.

Treba napomenuti da je CSS padding po defaultu jednak nuli. Ovaj atribut nije naslijeđen, odnosno mora biti instaliran za svaki blok. Osim uobičajenih i jasnih piksela, širina praznog prostora oko blokova je dana u relativnim jedinicama. Primjerice, gore navedeni primjeri mogu bitizapisuje 5% - kao rezultat, preglednik automatski računa širinu polja.

Kako koristiti nekretninu?

Dakle, razmatraju se načini pisanja atributa, ali kako ga koristiti na HTML stranici? Prva opcija je "lijepa" kada sve što se odnosi na CSS tehnologiju nije napisano u HTML-u, već se stavlja u zasebnu datoteku s odgovarajućim ekstenzijom.
Druga mogućnost je izravno pisanje na oznaku. CSS padding u ovom slučaju je naveden kako slijedi: Kako napisati atribut - odabire instalacijski program. U svakom slučaju, morate imati sve načine za korištenje svojstava za određivanje polja, tako da kada ga koristite.

Povezane publikacije