CSS padding je jedna od svojstava modela CSS okvira . Ovaj stenografski entitet postavlja ispunjavanje svih četiriju strana HTML elementa. CSS padding može se primijeniti na gotovo svaku HTML oznaku (osim za neke od oznaka tablice). Osim toga, sve četiri strane elementa mogu imati različitu vrijednost.
CSS popunjavanje nekretnine
Da biste koristili svojstvo stenogramskog CSS popunjavanja, možete upotrijebiti mnemonički "TRouBLe" (ili "TRiBbLe" za vas obožavatelje Star Treka). To označava gornji , desni , donji i lijevo , a odnosi se na redoslijed širine ispune koju postavite u stenografskom svojstvu. Na primjer:
padding: gore lijevo desno lijevo; padding: 1px 2px 3px 6px;Ako ste upotrijebili gore navedene vrijednosti, primijenit će drugu vrijednost ispune na svaku stranu bilo kojeg HTML elementa na koji ga primjenjujete. Ako želite primijeniti istu nadogradnju na sve četiri strane, možete pojednostaviti svoj CSS i upisati samo jednu vrijednost:
padding: 12px;S tom retkom CSS, 12 piksela paddinga vrijedit će na sve 4 strane elementa.
Ako želite da padding bude isti za vrh i dno, a lijevo i desno, možete napisati dvije vrijednosti:
padding: 24px 48px;Prva vrijednost (24px) primjenjivat će se na vrh i na dno, dok će se druga primijeniti na lijevoj i desnoj strani.
Ako pišete tri vrijednosti, to će učiniti horizontalnu podlogu (lijevo i desno) isto, dok promijenite gornji i donji dio:
padding: gornji desni i desni; padding: 0px 1px 3px;Prema modelu CSS kutija, padding je najbliži elementu / sadržaju. To znači da se dodatak dodaje elementu između širine ili visine sadržaja i graničnih vrijednosti koje upotrebljavate. Ako je padding postavljen na nulu, on ima isti rub kao i sadržaj.
CSS Padding Values
CSS ispuna može poduzeti bilo koju ne-negativnu duljinu. Obavezno odredite mjerenje, kao što je px ili em. Također možete odrediti postotak za svoj pad, koji će biti postotak širine bloka koji sadrži element. To uključuje i gornju i donju ispupčenje. Na primjer:
#container {width: 800px; visina: 200px; } #container p {width: 400px; visina: 75%; popunjavanje: 25% 0; }Visina odlomka unutar elementa #container bit će 75% visine #container plus 25% širine za gornji pad i 25% širine za pad padanja . To iznosi 300 + 200 + 200 = 700 piksela.
Učinci dodavanja CSS ispune
Na elementima na razini bloka , padding se nanosi na četiri strane. Budući da je element već blok ili kutija, padding se primjenjuje na kutije strane.
Kada se CSS padding dodaje u inline elemente , postoji svibanj biti neki preklapanje elemenata iznad i ispod inline element ako vertikalni padding prelazi visinu linije, ali neće gurnuti visinu linije prema dolje. Vodoravna CSS ispuna primijenjena za inline elemente bit će dodana na početak elementa i na kraj elementa. I padding može zamotati linije. Ali to se neće primijeniti na sve linije elementa s višestrukim brojem, tako da ne možete upotrijebiti padding za uokvirivanje segmenta višelinamskih sadržaja.
Također, u CSS2.1 ne možete stvoriti blokove spremnika gdje širina ovisi o elementu s postocima za širine (ili širine ispuna). Ako učinite, rezultat je nedefiniran. Preglednici će i dalje prikazivati sadržaj, ali nećete dobiti rezultate koje očekujete. Ako razmišljate o tome, smisla je, kao da element vašeg kontejnera mora znati širinu dječjih elemenata kako bi odredio njegovu širinu - kao što je kada nema unaprijed određenu širinu i jedan ili više njih širina postavljena kao postotak elementa spremnika, postavlja kružni lanac bez odgovora. Ako koristite postotke za širinu bilo čega na vašem dokumentu, trebali biste provjeriti jesu li definirane širine osnovnih elemenata.