CSS - SOMO LA 9: Margin na Padding
Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.
? Utangulizi
Katika CSS, mara nyingi tunahitaji kudhibiti nafasi — aidha kuacha nafasi kati ya elementi, au nafasi ya maandishi na mipaka ya boksi (element). Hapa ndipo margin na padding zinapofanya kazi. Ingawa zinaweza kuonekana kufanana, kila moja ina nafasi yake maalum katika layout ya ukurasa.
Kuelewa tofauti hizi ni muhimu kwa kupangilia vizuri vipengele vya tovuti.
✅ 1. Tofauti Kati ya Margin na Padding
| Kipengele | Maelezo |
|---|---|
padding |
Nafasi kati ya maudhui (text/image) na ukingo wa element |
margin |
Nafasi kati ya element moja na nyingine |
Mfano wa picha ya kufikirika:
? = element
-
paddingni nafasi ndani ya boksi -
marginni nafasi nje ya boksi
✅ 2. padding
Inatumika kuongeza nafasi ndani ya element (yaani kati ya content na border yake).
div {
padding: 20px;
}
Viwango vya padding:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Short-hand:
padding: 10px 15px 20px 25px;
/* top right bottom left */
✅ 3. margin
Inatumika kuongeza nafasi nje ya element, yaani kati ya element hiyo na zingine.
div {
margin: 30px;
}
Viwango vya margin:
-
margin-top -
margin-right -
margin-bottom -
margin-left
Short-hand:
margin: 10px 15px 20px 25px;
/* top right bottom left */
✅ 4. auto kwenye margin
margin: auto; hutumika katikati ya element ki-kiwima (horizontal centering).
div {
width: 300px;
margin: auto;
}
✅ 5. Thamani Zingine Zinaweza Kutumika:
- ...
help_outlineZoezi la Maswali
Umeionaje Makala hii.. ?
Share On:
👉1 Dua za Mitume na Manabii 👉2 ai web app 👉3 kitabu cha Simulizi 👉4 web hosting 👉5 Sira ya Mtume Muhammad (s.a.w) 👉6 Kitau cha Fiqh
Post zinazofanana:
CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...CSS - SOMO LA 24: CSS Variables (Custom Properties)
Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.
Soma Zaidi...CSS - SOMO LA 18: Grid Layout
Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.
Soma Zaidi...CSS - somo la 34: if() Condition katika CSS
Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...CSS - SOMO LA 23: Uelewa Zaidi wa CSS Animation na Transition
Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.
Soma Zaidi...CSS - somo la 1: Maana ya CSS, kazi zake na historia yake
Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...