Margin vs Padding
Tofauti kati ya ukingo na pedi ni kipengele muhimu katika CSS kwani ukingo na pedi ni dhana mbili muhimu zinazotumiwa katika CSS ili kutoa nafasi kati ya bidhaa tofauti. Pambizo na pambizo hazibadiliki na zina madhumuni tofauti kwa hivyo lazima zitumike ipasavyo. Ufungaji ni nafasi kati ya yaliyomo na mpaka wa kizuizi. Pambizo, kwa upande mwingine, ni nafasi nje ya mpaka wa block. Pambizo hutenganisha vizuizi kutoka kwa vizuizi vilivyo karibu wakati pedi hutenganisha mpaka na yaliyomo.
Padding ni nini?
Katika CSS (Majedwali ya Mitindo ya Kuachia), pedi ni nafasi inayowekwa kati ya maudhui na mpaka. Inatenganisha yaliyomo kwenye kizuizi kutoka kwa makali yake. Uwekaji pedi ni wazi na unajumuisha picha ya usuli au rangi ya usuli ya kipengele, vilevile. Kiasi cha pedi za kipengele kinabainishwa kwa kutumia neno "padding" katika msimbo wa CSS. Kwa mfano, kuongeza pedi ya 25px kwenye msimbo ifuatayo inaweza kutumika.
div {
upana: 300px;
urefu: 300px;
padding: 25px;
mpaka: 25px imara;
}
Ikihitajika, thamani tofauti za pedi zinaweza kubainishwa kando kwa kushoto, kulia, juu na chini pia. Kipande kifuatacho cha msimbo kinabainisha thamani tofauti za pedi kwa kila upande.
div {
upana: 300px;
urefu: 300px;
padding-top: 25px;
padding-chini: 35px;
padding-kushoto: 5px;
padding-kulia: 10px;
mpaka: 25px imara;
}
Margin ni nini?
Katika CSS (Majedwali ya Mitindo ya Kuachia), ukingo ni nafasi nje ya mpaka. Inatenganisha block kutoka kwa vitalu vingine. Ukingo pia ni wazi, lakini tofauti kubwa na pedi ni kwamba ukingo haujumuishi picha za mandharinyuma au rangi za mandharinyuma zinazotumika kwenye kipengele. Kiasi cha ukingo katika CSS kimebainishwa kwa kutumia neno "pembezoni". Kipande kifuatacho cha msimbo kilitumia ukingo wa 25px kuzunguka kizuizi cha div.
div {
upana: 320px;
urefu: 320px;
mpaka: 5px imara;
pengo: 25px;
}
Thamani tofauti zinaweza kubainishwa kwa pande tofauti za kizuizi, pia. Sehemu ifuatayo ya msimbo inatumika kwa thamani tofauti za ukingo kwa kila upande.
div {
upana: 320px;
urefu: 320px;
mpaka: 5px imara;
pengo-juu: 25px;
pambizo-chini: 35px;
pembezo-kushoto: 5px;
pambizo-kulia: 10px;
}
Kuna tofauti gani kati ya Pambizo na Padding?
• Kuweka pedi ni nafasi kati ya mpaka na maudhui huku ukingo ni nafasi nje ya mpaka.
• Ufungaji hutenganisha maudhui ya kizuizi na mpaka. Pambizo hutenganisha block moja kutoka kwa nyingine.
• Ufungaji unajumuisha picha za mandharinyuma na rangi za mandharinyuma zinazotumika kwa maudhui huku ukingo haujaridhishi vile.
• Pambizo za vizuizi vilivyo karibu vinaweza kuingiliana wakati pedi haziingiliani.
Muhtasari:
Padding vs Margin
Padding ni nafasi ndani ya mpaka wa kizuizi kinachotenganisha mpaka na maudhui. Pambizo ni nafasi nje ya mpaka ambayo hutenganisha kizuizi kutoka kwa vizuizi vilivyo karibu. Tofauti nyingine ni kwamba padding ni pamoja na picha ya mandharinyuma na rangi za mandharinyuma zinazotumika kuzunguka maudhui wakati ukingo hauna vitu hivyo. Pambizo za vizuizi vilivyo karibu wakati mwingine zinaweza kuingiliana wakati kivinjari kikitoa ukurasa lakini kwa kuweka mambo kama hayo hayatafanyika.
