picha

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


✅ 2. padding

Inatumika kuongeza nafasi ndani ya element (yaani kati ya content na border yake).

div {
  padding: 20px;
}

Viwango vya padding:

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:

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:

Ingia sasa ili uweze kusoma makala hii yote.

Jiunge nasi WhatsApp kupata update zetu
Zoezi la Maswali

help_outlineZoezi la Maswali

info Jaza maswali yote au baadhi kisha bofya kitufe cha kutuma majibu hapo chini.
1 Margin: auto; husaidia kufanya nini?
2 Ikiwa unataka kuondoa nafasi zote nje ya boksi, utatumia?
3 Kwa kutumia padding: 10px 20px;, maana yake ni nini?
4 Margin hutumika kwa nini hasa?
5 Padding inahusiana na nini?

Nyuma Endelea


Umeionaje Makala hii.. ?

       
Author: Rajabu image Tarehe: 2025-06-23 17:50:15 Topic: CSS Main: Masomo File: Download PDF Views 642

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 web hosting     👉2 Sira ya Mtume Muhammad (s.a.w)     👉3 Madrasa kiganjani     👉4 Dua za Mitume na Manabii     👉5 Kitabu cha Afya     👉6 Simulizi za Hadithi Audio    

Post zinazofanana:

CSS - SOMO LA 11: Mitindo ya Border (Border Styles)

Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.

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 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 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...
CSS - SOMO LA 17: Flexbox Advanced

Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.

Soma Zaidi...
CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML

katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html

Soma Zaidi...