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 kudhibit...