CSS padding je jedno od osobina modela CSS box-a . Ova skraćenica svojstva postavlja padding oko sve četiri strane HTML elementa. CSS padding se može primijeniti na skoro svaku oznaku HTML-a (osim nekih tabela). Pored toga, sve četiri strane elementa mogu imati drugačiju vrednost.
CSS svojstvo
Da biste koristili stenografski CSS svojstvo, možete koristiti mnemonik "TRouBLe" (ili "TRiBbLe" za fanove Star Trek-a). Ovo je gornje , desno , dno i levo , a odnosi se na porast širina podloge koje ste postavili u stenografskoj svojini. Na primjer:
padding: gornji desni desno lijevo; padding: 1px 2px 3px 6px;Ako ste iskoristili gorenavedene vrijednosti, primijenit će drugu vrijednost padanja na svaku stranu bilo kog elementa HTML-a na koji ga primjenjujete. Ako želite da primenite istu oblogu na sve četiri strane, možete pojednostaviti svoj CSS i samo napisati jednu vrijednost:
padding: 12px;Sa toj linijom CSS-a, 12 piksela podloge bi se primenjivale na sve 4 strane elementa.
Ako želite da podloga bude ista za gornje i donje i lijevo i desno, možete napisati dvije vrijednosti:
padding: 24px 48px;Prva vrijednost (24px) primjenjivaće se na vrh i na dnu, dok će se druga vrijednost primjenjivati lijevo i desno.
Ako pišete tri vrednosti, to će učiniti horizontalno obaranje (levo i desno) isto, menjajući gornji i donji deo:
padding: gornje desno i lijevo dno; padding: 0px 1px 3px;Prema CSS modelu, padding je najbliži samom elementu / sadržaju. To znači da je dodavanje dopušteno elementu između širine ili visine sadržaja i svih graničnih vrednosti koje koristite. Ako je padding postavljen na nulu, onda ima istu ivicu kao i sadržaj.
Vrednosti CSS paddinga
CSS padding može uzeti bilo koju negativnu vrednost dužine. Obavezno navedite merenje, na primer px ili em. Takođe možete odrediti procenat za vašu podlogu, što će biti procenat širine elementa koji sadrži blok. Ovo obuhvata i gornju i donju podlogu. Na primjer:
#container {width: 800px; visina: 200px; } #container p {širina: 400px; visina: 75%; padding: 25% 0; }Visina paragrafa unutar elementa #container će biti 75% visine #container plus plus 25% širine za gornje obloge i 25% širine za donje obloge. Ovo iznosi 300 + 200 + 200 = 700px.
Efekti dodavanja CSS paddinga
Na elementima bloka nivoa se nanosi na četiri strane. Pošto je element već blok ili kutija, bočica se nanosi na strane boksa.
Kada se dodavanje CSS-a dodaju u inline elemente , možda postoji i preklapanje elemenata iznad i ispod unutarnjeg elementa ako vertikalno padanje prelazi visinu linije, ali neće uticati visinu linije. Horizontalni CSS padding koji se primenjuje na inline elemente biće dodan na početak elementa i na kraj elementa. A podloga može zaviti linije. Ali neće se primenjivati na sve linije višeslojnog elementa, tako da ne možete koristiti padding da biste urezali segment višenamenskog linijskog sadržaja.
Takođe, u CSS2.1, ne možete kreirati kontejnerske blokove gdje širina zavisi od elementa sa procentima za širine (ili širine širenja). Ako to učinite, rezultat je nedefinisan. Pretraživači će i dalje prikazivati sadržaj, ali možda nećete dobiti rezultate koje očekujete. Ako razmislite o tome, ima smisla, kao da je element vašeg kontejnera potreban da sazna širinu njegovih dječjih elemenata kako bi definisao širinu - kao što je kada nema unapred definisanu širinu, a jedan ili više širina postavljena kao procenat elementa kontejnera, ovo postavlja kružni lanac bez odgovora. Ako koristite procente za širinu bilo čega na vašem dokumentu, treba da budete sigurni da su definisane širine elementa roditelja.