CSS padding anu salah sahiji sipat tina model kotak CSS . sipat shorthand Ieu susunan nu padding sabudeureun sadayana opat sisi unsur HTML. CSS padding bisa dilarapkeun ka ampir unggal tag HTML (iwal sababaraha tag tabel). Sajaba ti, sadaya opat sisi unsur bisa boga nilai béda.
CSS Padding Harta
Ngagunakeun harta CSS padding shorthand, anjeun tiasa nganggo mnemonic "kasulitan" (atawa "TRiBbLe" keur anjeun Star Trek fans). Ieu nangtung pikeun luhur, ka katuhu, handap, sarta ninggalkeun, sarta eta nujul kana urutan ti lebaran padding geus disetel di sipat shorthand. Salaku conto:
padding: luhur handap katuhu kénca; padding: 1px 2px 3px 6px;Lamun dipake nilai nu didaptarkeun di luhur, éta bakal nerapkeun nilai padding béda pikeun unggal sisi unsur HTML naon anjeun nerapkeun ka. Mun rék nerapkeun padding anu sarua ka sadaya opat sisi, anjeun tiasa simplify CSS anjeun sarta ngan nulis hiji nilai:
padding: 12px;Kalawan eta garis CSS, 12 piksel of padding bakal nerapkeun ka sadaya 4 sisi unsur.
Upami anjeun hoyong padding anu janten sami kanggo luhur jeung handap sarta kénca jeung katuhu, anjeun tiasa nyerat dua nilai:
padding: 24px 48px;Nilai heula (24px) bakal nerapkeun ka luhur jeung handap, sedengkeun nu kadua bakal nerapkeun ka kénca sarta katuhu.
Lamun nulis tilu nilai, éta baris nyieun padding horizontal (kénca jeung katuhu) sami, bari ngarobah luhureun tur handap:
padding: luhur katuhu-na-kénca handap; padding: 0px 1px 3px;Numutkeun model kotak CSS, padding anu pangdeukeutna ka unsur / eusi éta sorangan. Ieu ngandung harti yén padding anu ditambahkeun kana unsur di antara lebar eusi atawa jangkungna sarta sagala nilai wates nu Anjeun pake. Mun padding anu disetel ka nol, mangka boga ujung sarua sakumaha eusi.
Nilai CSS Padding
CSS padding tiasa nyandak sagala nilai panjang non-négatip. Pastikeun pikeun nangtukeun ukuran, sapertos px atanapi em. Anjeun oge bisa nangtukeun perséntase pikeun padding anjeun, anu bakal perséntase lebar block ngandung unsur urang. Ieu ngawengku pikeun padding luhur jeung handap. Salaku conto:
#container {lebar: 800px; jangkungna: 200px; } #container p {lebar: 400px; jangkungna: 75%; padding: 25% 0; }Jangkungna ngeunaan ayat jero unsur #container bakal 75% tina jangkungna #container 's tambah 25% ti rubak pikeun padding luhur jeung 25% ti rubak pikeun padding handap. Ieu totalna 300 + 200 + 200 = 700px.
Balukar Nambahan Padding CSS
Dina elemen block-tingkat , padding anu dilarapkeun dina opat sisi. Kusabab unsur nyaéta block atanapi kotak geus, padding anu dilarapkeun ka sisi kotak.
Nalika CSS padding anu ditambahkeun kana inline elemen , meureun aya sababaraha tumpang tindih unsur luhur na handap unsur inline lamun padding nangtung ngaleuwihan jangkungna garis, tapi moal nyorong jangkungna garis handap. CSS padding horizontal dilarapkeun ka elemen inline bakal ditambahkeun kana awal unsur sarta tungtung unsur. Sarta padding anu bisa mungkus garis. Tapi moal dilarapkeun ka sadaya garis tina unsur multi-garis, jadi Anjeun teu tiasa maké padding mun indent hiji bagean tina multi-garis eusi inline.
Ogé, dina CSS2.1, Anjeun teu bisa nyieun blok wadahna mana lebar gumantung unsur kalawan percentages keur lebaran (atawa lebaran padding). Upami Sadérék hasilna mangrupa undefined. Panyungsi masih bakal nembongkeun eusi, tapi anjeun bisa jadi teu meunang hasil anjeun expecting. Lamun mikir ngeunaan eta, ngajadikeun rasa, sabab lamun unsur wadahna Anjeun perlu nyaho lebar elemen anak na guna nangtukeun na lebar-kayaning lamun teu boga rubak pre-dihartikeun, sarta salah sahiji atawa leuwih boga rubak diatur salaku persentasi unsur wadahna, ieu susunan up a ranté sirkular jeung euweuh jawaban. Lamun make percentages keur lebaran nanaon dina dokumen, anjeun kedah pastikeun yén lebaran indungna unsur ogé tangtu.