Prema modelu bloka, prikazivanje CSS popunjavanja ili polja predstavlja odstupanje od vanjske granice elementa do njegovog sadržaja. CSS vam omogućuje da upravljate veličinom obloge za svaku stranu bloka pojedinačno ili za sve strane istovremeno. Da bi se postigao ispravan prikaz elementa, važno je razumjeti značajke izračuna unutarnjih udubljenja.

grupa padding-properties

• 3 parametra. Ako su bočne margine jednake, mogu se grupirati u jedan argument. Nalog za prijenos: gornje, lijevo i desno, donje polje.

//padding: padding-top padding-right + padding-left padding-bottom
.element {
 padding: 10px 20px 30px; 
}

• 2 parametra. Djelomično grupiranje gornjeg s donjim i lijevim s desnim poljima.

//padding: padding-top + padding-bottom padding-right + padding-left
.element {
 padding: 10px 20px; 
}

• 1 parametar. Postavlja veličinusamo za sve obloge.

.element {
 padding: 10px; 
}

Mjesto u strukturi bloka

Podrazumijeva se da je vrijednost padding-a u CSS-u uključena u ukupnu vrijednost prostora koji zauzima prostor.

& lt; skript async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
& lt ;! - fb_336x280_2 - & gt;

& lt; script & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

.block1 {
 širina: 100px;
visina: 100px;
padding-right: 30px;
padding-top: 20px; 
}

Za element.block1stvarna veličina bit će 130px širine i 120px visine. Svojstvaširineivisinepo zadanom određuju veličinu predmetnog područja, a padding u CSS-u se mjeri zasebno.



Mjerne jedinice

Možete odrediti količinu obloge u svim jedinicama udaljenosti koje se koriste u CSS - pikselima, postocima, em ili rem.

Važno: ako je postotak postavljen na uvlačenje, uvijek će se oduzeti od širine elementa PARENT, čak i ako je to gornje ili donje polje.

.parent {{64) {irina: 200px;
visina: 100px; 
}
.block2 {
 visina: 30px;
širina: 100px;
padding-bottom: 10%; 
}

Za blokbloka2 , donja padding će biti 20px (10% od 200px), a stvarna visina je 50px.



Za razliku od margine, padding u CSS-u ne može biti manji od nule. Kada šalje instrukciju negativnu vrijednost, preglednik će je jednostavno ignorirati.

Elementi pojedinačnih stavki

Definiranje alineja uvlake za elemente s prikazom niza tipova ima svoje zamršenosti.

Za blokove koji su dio linije,vrijednost gornjeg i donjeg polja se uvijek zanemaruje, jer mogu poremetiti konstrukciju.

raspon (
 padding-left: 30px;
padding-right: 20px;
padding-top: 50px;
padding-bottom: 40px; 
}

Lijevo i desno od raspona elemenata pojavit će se odgovarajuće upute za uvlačenje, ali neće biti vertikalnog pomaka linije. U stvari, preglednik će postaviti potrebna polja u blok, ali to nije važno, jer ne utječu na njegovo mjesto u ukupnoj niti.

CSS padding svojstvo je dobro podržano od strane svih preglednika, uključujući i najstariji, a može se animirati i pomoću upute za animaciju i prijelaz.