I-CSS padding ingenye yezakhiwo ze- CSS box model . Lo mncintiswano ubeka i-padding ezungeze zonke izinhlangothi ezine ze-HTML element. I-CSS padding ingasetshenziswa cishe kuwo wonke amathegi we-HTML (ngaphandle kwamanye amathebula etafuleni). Ukwengeza, zonke izinhlangothi ezine zesici zingaba nenani elihlukile.
I-CSS i-Padding Property
Ukuze usebenzise impahla encane ye-CSS padding, ungasebenzisa i-mnemonic "TRouBLe" (noma "TRiBbLe" ngawe abalandeli be-Star Trek). Lokhu kuphezulu, ngakwesokudla , ngezansi , nangakwesobunxele , futhi kubhekisela ekuhleleni kwamanzi amakhulu okubeka eceleni owamisa endaweni encane. Ngokwesibonelo:
i-padding: phezulu kwesokudla kwesokunxele kwesokunxele; i-padding: 1px 2px 3px 6px;Uma usebenzisa izindinganiso ezibalwe ngenhla, zingasebenzisa i-padding value ehlukene kuzo zonke izici zanoma yiluphi uhlobo lwe-HTML oluyifaka kulo. Uma ufuna ukusebenzisa i-padding efanayo kuzo zonke izinhlangothi ezine, ungenza lula iCSS yakho futhi ubhale inani elilodwa:
i-padding: 12px;Ngalolo chungechunge lwe-CSS, amaphikseli angu-12 we-padding angasebenza kuzo zonke izinhlangothi ezine zesici.
Uma ufuna i-padding ibe efanayo phezulu nangaphezulu futhi ngakwesokunxele nangakwesokudla, ungabhala amanani amabili:
i-padding: 24px 48px;Inani lokuqala (24px) lizosebenza phezulu nakwesezansi, kanti lesibili sizosebenza ngakwesobunxele nangakwesokudla.
Uma ubhala izindinganiso ezintathu, lokho kuzokwenza ukuthi i-padding enezingqimba (ngakwesobunxele nangakwesokudla) ifane, ngenkathi ishintsha phezulu naphezulu:
i-padding: phezulu kwesokudla kwesokunxele; i-padding: 0px 1px 3px;Ngokomfanekiso webhokisi le-CSS, i-padding iseduze kakhulu nesici / okuqukethwe ngokwayo. Lokhu kusho ukuthi ukukhwabanisa kwengezwe kwisici phakathi kokubanzi kokuqukethwe noma ukuphakama nanoma imaphi amanani omngcele oyisebenzisayo. Uma i-padding isethwe ku-zero, ingabe inomkhawulo owodwa njengokuqukethwe.
Ama-CSS Padding Values
I-CSS padding ingathatha noma yiliphi inani elingalingani ubude. Qinisekisa ukuthi ucacise isilinganiso, njenge-px noma i-em. Ungaphinda ucacise iphesenti ye-padding yakho, okuzoba yiphesenti yobubanzi be-block equkethe. Lokhu kufaka phakathi ukukhishwa okuphezulu nokuphansi. Ngokwesibonelo:
#container {ububanzi: 800px; ukuphakama: 200px; } #container p {ububanzi: 400px; ukuphakama: 75%; i-padding: 25% 0; }}Ukuphakama kwesigaba ngaphakathi kwe- # elementtainer element kuzoba ngamaphesenti angama-75% okuphakama kwe-#container kanye no-25% ububanzi be-padding phezulu kanye no-25% ububanzi be-padding ephansi. Lokhu kuthatha 300 + 200 + 200 = 700px.
Imiphumela yokufaka i-CSS Padding
Ngezici ze-block-level , i-padding isetshenziswa ezinhlangothini ezine. Ngenxa yokuthi i-element isiphequluli noma ibhokisi selivele likhona, i-padding isetshenziselwa izinhlangothi zebhokisi.
Uma i-CSS padding ingeziwe ezakhiweni ezifakwe ngaphakathi , kungase kube nokunye kokunye kwezinto ezingenhla nangaphansi kwesici esinqumayo uma ukugqama okuqondile kufaka ukuphakama komugqa, kodwa ngeke kuqhube ukuphakama komugqa phansi. I-padding egcwele ene-CSS esetshenziselwe izakhi ezinamathelisi izongezwa ekuqaleni kokungena nokuphela kwesici. Futhi i-padding ingafaka imigqa. Kodwa ngeke kusetshenziswe kuwo wonke imigqa yento ehlanganisiwe, ngakho-ke awukwazi ukusebenzisa i-padding ukuze uhambise ingxenye yezinto eziqukethwe ngaphakathi kwe-inline.
Futhi, ku-CSS2.1, awukwazi ukudala amabhulogi ezitshalo lapho ububanzi buxhomeke kulelo sici ngamaphesenti ububanzi (noma ububanzi be-padding). Uma wenza umphumela awuqondanga. Iziphequluli zizobonisa okuqukethwe, kodwa ngeke uthole imiphumela oyilindele. Uma ucabanga ngakho, kunengqondo, njengokungathi isici sakho setiqukathi sidinga ukwazi ububanzi bezingxenye zayo zezingane ukuze sikwazi ukuchaza ububanzi bayo-njengalapho engenawo ububanzi obuchazwe ngaphambili, futhi eyodwa noma ngaphezulu ububanzi obubekiwe njengephesenti yesici se-container, lokhu kubeka uchungechunge oluyindilinga ngaphandle kwempendulo. Uma usebenzisa amaphesenti ngobukhulu bento kunoma iyiphi idokhumenti yakho, kufanele uqiniseke ukuthi ububanzi bomzimba bomzali buchazwe.