CSS padding ndi imodzi mwa katundu wa CSS box model . Malo achidulewa amachititsa padding kuzungulira mbali zonse zinayi za HTML chinthu. CSS padding ingagwiritsidwe ntchito pafupifupi mtundu uliwonse wa HTML (kupatulapo ma tebulo a tebulo). Kuwonjezera apo, mbali zonse zinayi za chinthucho chingakhale ndi mtengo wosiyana.
CSS Padding Property
Kuti mugwiritse ntchito katundu wafupipafupi wa CSS padding, mungagwiritse ntchito mnzanuyo "TROUBLe" (kapena "TRiBbLe" kwa azimayi a Star Trek). Izi zikuyimira pamwamba , kumanja , pansi , ndi kumanzere , ndipo zimatanthawuza dongosolo la mapafupi omwe mumakhala nawo mufupi ndi katundu. Mwachitsanzo:
padding: pamwamba kumanja kumanzere kumanzere; padding: 1px 2px 3px 6px;Ngati munagwiritsa ntchito mfundo zomwe zili pamwambapa, zingagwiritse ntchito mtengo wosiyana wa padding kumbali zonse za HTML zomwe mukuzilemba. Ngati mukufuna kugwiritsa ntchito padding yomweyi kumbali zonse zinayi, mukhoza kuchepetsa CSS yanu ndi kulemba phindu limodzi:
padding: 12px;Ndi mzere umenewo wa CSS, ma pixel 12 a padding angagwiritsidwe ntchito kumbali zonse 4 za chinthucho.
Ngati mukufuna padding kukhala ofanana pamwamba ndi pansi ndi kumanzere ndi kulondola, mukhoza kulemba mfundo ziwiri:
padding: 24px 48px;Mtengo woyamba (24px) ungagwiritsidwe ntchito pamwamba ndi pansi, pamene wachiwiri angagwiritse ntchito kumanzere ndi kumanja.
Ngati mulemba mfundo zitatu, izi zimapangitsa padendetsedwe (kumanzere ndi kumanja) mofanana, pokhala pamwamba ndi pansi:
padding: kumanja kumanja ndi kumanzere pansi; padding: 0px 1px 3px;Malinga ndi CSS bokosi chitsanzo, padding ili pafupi kwambiri ndi mfundo / zokhazokha. Izi zikutanthauza kuti padding ikuwonjezeredwa ku chinthu chomwe chili pakati pa zomwe zili m'kati mwake kapena kutalika kwake ndi malire omwe mumagwiritsa ntchito. Ngati padding yaikidwa ku zero, ndiye ili ndi malire omwewo.
CSS Padding Values
CSS padding ikhoza kutenga mtengo uliwonse wosasintha. Onetsetsani kuti mufotokoze kuyeza kwake, monga px kapena em. Mukhozanso kufotokozera peresenti ya padding yanu, yomwe idzakhala peresenti ya m'lifupi mwake. Izi zikuphatikizapo pamwamba ndi pansi padding. Mwachitsanzo:
#container {width: 800px; kutalika: 200px; } #container p {m'lifupi: 400px; kutalika: 75%; padding: 25% 0; }}Kutalika kwa ndime mkati mwachinthu chokwanira # kudzakhala 75% ya kutalika kwa #container kuphatikizapo 25% m'lifupi kwa pamwamba padding ndi 25% ya m'lifupi kwa padding pansi. Izi zili totali 300+ 200 + 200 = 700px.
Zotsatira za Kuwonjezera CSS Padding
Pazigawo zam'mbali zamatabwa , padding ikugwiritsidwa ntchito kumbali zinayi. Chifukwa chipangizocho ndibokosi kapena bokosi kale, padding ikugwiritsidwa ntchito ku bokosi mbali.
Pamene CSS padding ikuwonjezeredwa ku zinthu zowonjezera , pangakhale zowonjezereka zazinthu pamwamba ndi pansi pa chinthu chakuya ngati padding yowona ikuposa kutalika kwa mzere, koma sichidzakweza mzere wokwera pansi. Zowonjezera CSS padding zomwe zimagwiritsidwa ntchito pazinthu zozungulira zidzawonjezeredwa kumayambiriro kwa gawo ndi mapeto a chinthucho. Ndipo padding akhoza kukulunga mizere. Koma sizingagwiritsidwe ntchito ku mizere yonse ya mndandanda wamakina ambiri, kotero simungagwiritse ntchito padding kuti mupange gawo la mndandanda wamakondomu amkati.
Ndiponso, mu CSS2.1, simungathe kupanga zitsulo zomwe zimadalira chigawo ndi magawo a widths (kapena padding widths). Ngati mutachita zotsatirazi ndizosadziwika. Otsitsilabe adzalowera zomwe zili mkati, koma simungapeze zotsatira zomwe mukuyembekezera. Ngati mukuganiza za izo, ndizomveka, ngati kuti chidebe chanu chiyenera kudziŵa kuchuluka kwa zinthu za mwana wawo kuti mudziwe kufalika kwake-monga pamene alibe chiwerengero choyambirira, ndipo chimodzi kapena zingapo m'lifupi mwayikidwa peresenti ya chidebe cha chidebe, izi zimakhazikitsa mzere wozungulira popanda yankho. Ngati mumagwiritsa ntchito maperesenti kwa widths pa chirichonse pa chikalata chanu, muyenera kuonetsetsa kuti kholo element element widths amatanthauzanso.