CSS padding omogućuje HTML koderu da postavi zadani padding ili mrtvi prostor izvan HTML elementa. Prednost ovog postupka je u tome što kodera štedi od ponavljanja tog koda za popunjavanje za svaku instancu tog elementa i lakše stvara dosljednost na stranici. HTML element koji treba dopuniti može biti bilo koji broj stvari, kao što su odlomak, tablica ili naslov.
Da biste stvorili padding u CSS-u, najprije ćete morati identificirati HTML element koji želite dodati. Ovaj element koji želite umetnuti poznat je kao selektor. Zatim ćete htjeti navesti odgovarajuće vrijednosti dopuna. U CSS-u postoji pet različitih tipova svojstava dopuna – jedno za sve četiri strane elementa odjednom, a četiri druge za svaku pojedinačnu stranu elementa (npr. lijeva strana, desna strana, gornja strana ili donja strana ). Svojstvo koje dopušta programeru da navede vrijednosti za sve četiri strane HTML elementa odjednom naziva se skraćeno svojstvo.
Jezik kodiranja koji se koristi za određivanje jedne deklaracije CSS dopuna je jednostavno riječ “padding”. Nakon te oznake nalaze se relevantne “vrijednosti” dopuna ili informacije o željenoj količini prostora, obično predstavljene pikselima ili postotkom. Ispuna i vrijednosti su zapisane unutar vitičastih zagrada ili vitičastih zagrada (tj. “{” i “}”). Prethodi svemu tome je HTML element koji treba dopuniti (npr. “p” za odlomak ili “H2” za zaglavlja razine 2).
U smislu načina na koji je vrijednost predstavljena, vrijednosti se mogu predstaviti u pikselima (npr. 1px ili 5px), točkama (npr. 1pt ili 5pt) ili inčima (npr. 1in ili 5in) ili centimetrima (npr. 1cm ili 5cm) . Vrijednosti se također mogu deklarirati kao postotak HTML elementa koji se stilizira. Ako je vrijednost 50%, na primjer, dopuna će biti jednaka polovici veličine elementa.
Sljedeći primjeri su HTML kod za popunjavanje HTML elementa putem vrijednosti prikazanih u postotku i duljini, respektivno. Ako je dodijeljena samo jedna vrijednost, tada će web-preglednici dodijeliti ovu dopunu na sve četiri strane HTML elementa.
padding: 10%;
padding: 100px;
Dodavanje više vrijednosti gornjoj vrsti deklaracije dopuna dovest će do toga da ih web-preglednici interpretiraju na određeni način. Ako su dodijeljene dvije vrijednosti, prva će odgovarati vrhu i dnu, dok druga odgovara lijevoj i desnoj. Tri vrijednosti će uzrokovati da se prva odnosi na vrh, druga na lijevu i desnu stranu, a treća na dno HTML elementa. Dodjeljivanje najviše četiri vrijednosti uzrokuje da prve, druge, treće i četvrte vrijednosti odgovaraju gornjem, desnom, dnu i lijevom dijelu HTML elementa, tim redoslijedom. Kada je navedeno više od jedne vrijednosti, treba ih odvojiti razmacima i završiti točkom i zarezom, na primjer:
padding:10px 20px 10px 20px;
Padding u CSS-u može se raditi i jedna po jedna strana. S tim u vezi, dostupna su još četiri svojstva dopuna. To su padding-top, padding-desno, padding-bottom i padding-left. Da biste kreirali padding u CSS-u na ovaj precizniji način, morat ćete označiti svojstva istom sintaksom kao što je gore navedeno u skraćenim deklaracijama. Svako od ovih svojstava dopuna ima samo jednu vrijednost u duljini ili postotku. Na primjer:
padding-top: 10px;
padding-desno: 20px;
padding-bottom: 10px;
padding-left: 20px;
Sljedeći kod stvara web-stranicu, deklarira svojstva dopuna između oznaka stila, a zatim ih koristi u elementu odlomka specificiranom oznakom p. Tekst između /* i */ su bilješke koje objašnjavaju vrstu korištenog dopuna i ne bi bili uključeni u CSS kod za punjenje.
Ovaj tekst ima isti padding sa svake strane. Razmak sa svake strane je 10px.
Ovaj tekst ima gornji i donji padding od 50px i lijevo i desno od 30px.
Ovaj tekst ima gornji padding od 10px, desni padding od 20px, donji padding od 10px i lijevi padding od 20px.
U gornjem primjeru, “primjer1” itd. su nazivi dodijeljeni klasi, koji se zatim pozivaju u odlomcima. Razmak između oznake p i naziva klasa na početku koda označava deklaraciju klase koja je dodijeljena paragrafu. Primijetite zagrade nakon deklaracije klase koja obuhvata dodjelu vrijednosti svojstva paddinga.
Iako se ovo može činiti kao puno posla, daleko je manje radno intenzivan od specificiranja dopuna za svaki pojedinačni odlomak. Možete deklarirati jedno svojstvo dopuna za željeni element, koji je u gornjem primjeru oznaka p, a zatim referencirati klasu kada koristite element između oznaka tijela stranice. Ako je potrebna samo jedna vrsta dopuna za sve paragrafe, uopće ne morate koristiti klase. Jednostavno upotrijebite sljedeći kod između oznaka stila, a zatim kodirajte odlomke bez navođenja bilo koje klase. Ovaj bi kod išao između oznaka tijela umjesto koda u gornjem primjeru.
p {padding:10px 20px 10px 20px;}
Ovaj CSS padding koji bi ovo stvorio utjecao bi na sve paragrafe iako nije navedena klasa.