CSS - SOMO LA 9: Margin na Padding

? 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

Mfano wa picha ya kufikirika:
? = element

• padding ni nafasi ndani ya boksi

• margin ni 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:

• ...