CSS - SOMO LA 10: Box Model katika CSS

? Utangulizi

Katika CSS, kila element ya HTML huonekana kama sanduku. Hili sanduku lina sehemu nne zinazowezesha kupanga muonekano na nafasi ya element hiyo. Hii inaitwa CSS Box Model. Kuelewa box model ni jambo la msingi sana kwa yeyote anayetaka kuwa mbunifu bora wa mtandao, kwani inasaidia kupangilia vyema vipengele vya ukurasa kwa usahihi na ufanisi.

✅ 1. Vipengele vya Box Model

CSS box model ina sehemu zifuatazo:

1. Content

• Hiki ni kile kilichoandikwa au kuwekwa kwenye element (maandishi, picha, nk).

• Urefu na upana wa element huanzia hapa.

2. Padding

• Nafasi kati ya content na border.

• Huongeza nafasi ya ndani ya boksi.

p {
  padding: 20px;
}

3. Border

• Ukuta unaozunguka element.

• Unaweza kuupa rangi, unene, na mtindo.

p {
  border: 2px solid black;
}

4. Margin

• Nafasi kati ya element moja na nyingine.

• Hutoa nafasi ya nje ya element.

p {
  margin: 30px;
}

✅ 2. Muundo wa Mchoro

|----------------------------------|
|             margin               |
|  |----------------------------|  |
|  |          border            |  |
|  |  |----------------------|  |  |
|  |  |       padding        |  |  |
|  |  |  [   content here ]  |  |  |
|  |  |----------------------|  |  |
|  |----------------------------|  |
|----------------------------------|

✅ 3. box-sizing Property

Kwa kawaida, upana na urefu wa element hupimwa kutoka kwenye content pekee. Ukiongeza padding na border, element huonekana kuwa kubwa kuliko ulivyotarajia.

Ili kudhibiti hilo, tumia:

* {
  box-sizing: border-box;
}

Hii inafanya padding na border ziwe ndani ya upana uliotaja kwenye width na height.

✅ 4. Mfano Kamili:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid blue;
  margin: 30px;
  background: lightyellow;
  box-sizing: border-box;
}

<div class="box">
  Hii ni box model kamili
</div>

✅ Hitimisho

CSS Box Model ni msingi wa kuelewa mpangilio wa elementi kwenye ukurasa. Ukielewa tofauti kati ya content, padding, border, na margin, unaweza kupanga layout zako kwa usahihi na kuepuka makosa ya nafasi zisizotarajiwa.

? Somo Linalofuata: SOMO LA 11 - Border Styles (Mitindo ya Border)

Tutajifunza aina mbalimbali za mipaka (border styles) na jinsi ya kubadilisha unene, rangi, na muundo wa border kwenye CSS.

? Maswali ya Kujitathmini

1. Box model ina sehemu ngapi kuu?
   a) 2
   b) 3
   c) 4
   d) 5

2. padding ipo kati ya vitu gani?
   a) kati ya margin na border
   b) kati ya content na border
   c) kati ya content na margin
   d) kati ya text na div

3. Ikiwa utatumia box-sizing: border-box, nini kitatokea?
   a) Border na padding hazitahesabiwa kwenye width
   b) Border na padding huongezeka nje ya element
   c) Border na padding hujumuishwa ndani ya width
   d) Hakuna kinachobadilika

4. margin hutumika kwa kazi gani?
   a) Kuweka rangi ya border
   b) Kupanua maandishi
   c) Kutoa nafasi kati ya elementi tofauti
   d) Kuongeza kivuli

5. Ukitaka upana wa boksi usibadilike hata baada ya kuongeza border, unatumia nini?
   a) width: fixed;
   b) border: lock;
   c) box-size: limit;
   d) box-sizing: border-box;