CSS dodavanje je jedno od svojstava CSS model kutije. Ovo stenografsko svojstvo postavlja popunjavanje oko sve četiri strane HTML elementa. CSS podloga može se primijeniti na gotovo svaki HTML oznaka (osim nekih oznaka tablice). Uz to, sve četiri strane elementa mogu imati različitu vrijednost.
Svojstvo dodavanja CSS-a
Da biste koristili svojstvo kratkotrajnog dodavanja CSS-a, možete koristiti mnemonički "TRouBLe" (ili "TRiBbLe" za vaše obožavatelje Star Trek-a). Ovo znači vrh, pravo, dno, i lijevo, a odnosi se na redoslijed širina popunjavanja koji ste postavili u svojstvu stenografije. Na primjer:
popunjavanje: gore desno dolje lijevo;
popunjavanje: 1px 2px 3px 6px;
Ako ste koristili gore navedene vrijednosti, primijenio bi drugačiju vrijednost popunjavanja na svaku stranu bilo kojeg HTML elementa na koji ga primjenjujete. Ako želite primijeniti isti uložak na sve četiri strane, možete pojednostaviti svoj CSS i samo napišite jednu vrijednost:
podstava: 12px;
S tom linijom CSS-a, 12 piksela popunjavanja odnosilo bi se na sve 4 strane elementa.
Ako želite da podstavci budu jednaki za gornji i donji te lijevi i desni dio, možete napisati dvije vrijednosti:
popunjavanje: 24px 48px;
Prva vrijednost (24px) odnosila bi se na vrh i dno, dok bi se druga odnosila na lijevu i desnu stranu.
Ako napišete tri vrijednosti, to će horizontalno popunjavanje (lijevo i desno) učiniti jednakim, dok se mijenjaju gornji i donji dio:
popunjavanje: gornji desni i lijevi donji dio;
popunjavanje: 0px 1px 3px;
Prema modelu CSS okvira, dodavanje je najbliže samom elementu / sadržaju. To znači da se dodavanje doda elementu između širine ili visine sadržaja i svih vrijednosti obruba koje koristite. Ako je dodatak postavljen na nulu, tada ima isti rub kao i sadržaj.
CSS vrijednosti paddinga
CSS dodavanje može imati bilo koju negativnu vrijednost duljine. Svakako navedite mjerenje, poput px ili em. Također možete odrediti postotak za svoje popunjavanje, što će biti postotak širine bloka koji sadrži element. To uključuje gornje i donje obloge. Na primjer:
#container {širina: 800px; visina: 200px; }
#container p {širina: 400px; visina: 75%; popunjavanje: 25% 0; }
The visina odlomka unutar #kontejner element će biti 75% od #kontejnerVisina plus 25% širine za gornju oblogu i 25% širine za donju oblogu. To ukupno iznosi 300 + 200 + 200 = 700px.
Učinci dodavanja CSS obloga
Na elementi na razini bloka, podloga se nanosi na četiri strane. Budući da je element već blok ili okvir, podmetač se primjenjuje na stranice okvira.
Kada se CSS dodavanje doda u inline elementi, može doći do preklapanja elemenata iznad i ispod umetnutog elementa ako vertikalno popunjavanje premašuje visinu crte, ali neće pomaknuti visinu crte prema dolje. Horizontalno dodavanje CSS-a primijenjeno na umetnute elemente bit će dodano na početak elementa i na kraj elementa. A podstava može zamotati linije. Ali to se neće primjenjivati na sve retke elementa s više redaka, tako da ne možete upotrijebiti dodavanje za uvlačenje segmenta višerednih linija.
Također, u CSS2.1 ne možete stvoriti blokove spremnika u kojima širina ovisi o elementu s postocima za širine (ili širine obloga). Ako to učinite, rezultat je nedefiniran. Preglednici će i dalje prikazivati sadržaj, ali možda nećete dobiti rezultate koje očekujete. Ako dobro razmislite, to ima smisla, kao da vaš element spremnika mora znati širinu svojih podređenih elemenata kako bi definirao njegovu širinu - kao npr. kada nema unaprijed definiranu širinu, a jedan ili više ima postavljenu širinu kao postotak elementa spremnika, to postavlja kružni lanac bez odgovor. Ako koristite postotke za širine bilo čega na vašem dokumentu, trebali biste biti sigurni da su definirane i širine nadređenih elemenata.