Padding CSS minangka salah sawijining sifat saka model kothak CSS . Properti sing cendhak kasebut ndadekake padding ngubengi kabeh papat unsur HTML. Padding CSS bisa diterapake ing saklawasé saben tag HTML (kajaba kanggo sawetara tag tabel). Tambahan, kabeh papat unsur bisa duwe nilai sing beda.
CSS Padding Property
Kanggo nggunakake properti padetan CSS shorthand, sampeyan bisa nggunakake mnemonic "TRouBLe" (utawa "TRiBbLe" kanggo sampeyan Star Trek fans). Iki stands for ndhuwur , tengen , ngisor , lan kiwa , lan nuduhake urutan lebar lapis sampeyan nyetel ing properti shorthand. Tuladhane:
padding: ndhuwur tengen kiwa; padding: 1px 2px 3px 6px;Yen sampeyan nggunakake angka sing kadhaptar ing ndhuwur, aplikasi kasebut bakal nampilake nilai padding sing beda kanggo saben sisih elemen HTML apa wae sing sampeyan gunakake. Yen sampeyan pengin ngisi padding padha menyang kabeh papat, sampeyan bisa nyederhanakake CSS lan mung nulis siji angka:
padding: 12px;Kanthi baris CSS, 12 piksel padding bakal ditrapake kanggo kabeh 4 sisi elemen.
Yen sampeyan pengin padding dadi padha kanggo ndhuwur lan ngisor lan kiwa lan tengen, sampeyan bisa nulis rong nilai:
padding: 24px 48px;Nilai sing kapisan (24px) bakal ditrapake ing ndhuwur lan ngisor, dene sing kapindho bakal ditrapake ing sisih kiwa lan tengen.
Yen sampeyan nulis telung angka, sing bakal nggawe padding horisontal (kiwa lan tengen) padha, nalika ngganti ndhuwur lan ngisor:
padding: ndhuwur tengen-lan-kiwa ngisor; padding: 0px 1px 3px;Miturut model kothak CSS, padding paling cedhak karo unsur / isi kasebut. Iki tegese padding ditambahake menyang elemen antarane lebar utawa dhuwur isi lan sembarang watesan sing sampeyan gunakake. Yen lapis disetel dadi nol, banjur nduweni pinggiran sing padha karo isi kasebut.
CSS Padding Values
Padding CSS bisa njupuk sembarang dawa non-negatif. Priksa manawa nemtokake pangukuran, kayata px utawa em. Sampeyan uga bisa nemtokake persentasi kanggo padding, sing bakal dadi persentasi jembar saka blok ngemot unsur. Iki kalebu kanggo ndhuwur lan ngisor padding. Tuladhane:
#container {width: 800px; dhuwur: 200px; } #container p {width: 400px; dhuwur: 75%; padding: 25% 0; }Dhuwur saka paragraf ing sangisore unsur #container bakal dadi 75% saka #container kang dhuwur ditambah 25% saka lebar kanggo padding ndhuwur lan 25% saka lebar kanggo padding ngisor. Iki total 300 + 200 + 200 = 700px.
Efek Nambahake Padding CSS
Ing unsur tingkat blok , padding ditrapake ing papat sisi. Amarga unsur kasebut minangka blok utawa kotak, padding ditrapake ing sisi kotak.
Nalika padhang CSS ditambahake ing elemen saklapan , ana uga sawetara tumpang tindih unsur ing ndhuwur lan ngisor unsur inline yen padding vertikal ngluwihi dhuwur baris, nanging ora bakal nudhuh baris dhuwur. Padding horisontal CSS diterapake kanggo elemen inline bakal ditambahake ing awal elemen lan mburi elemen kasebut. Lan padding bisa mbungkus garis. Nanging ora bakal ditrapake kanggo kabeh baris saka elemen multi baris, supaya sampeyan ora bisa nggunakake padding kanggo ngemot segmen konten inline multi baris.
Uga, ing CSS2.1, sampeyan ora bisa nggawe pamblokiran wadhah endi jembar gumantung marang unsur kanthi persentase kanggo lebar (utawa lapis padding). Yen sampeyan nggawe asil ora ditemtokake. Browser bakal tetep nampilake isi, nanging sampeyan ora bisa nampa asil sing dikarepake. Yen sampeyan mikir babagan iki, prasaja, yen unsur wadhah kudu mangerteni jembar unsur-unsur anak-anake kanggo nemtokake jembaré-kayata nalika ora duwe jembar sing wis ditemtokake, lan siji utawa luwih wis jembaré ditemtokake minangka persentasi saka unsur wadhah, iki nyetel rantai sirkular tanpa jawaban. Yen sampeyan nggunakake persentase kanggo lebar apa wae ing dokumen sampeyan, sampeyan kudu nggawe manawa watesan unsur induk uga didefinisine.