CSS - SOMO LA 13: Display Property

 Utangulizi

Katika HTML kila element ina tabia yake ya asili ya kuonyeshwa kwenye ukurasa. Kwa mfano, div huonyesha kama block, wakati span huonyesha kama inline. Lakini kwa kutumia display property kwenye CSS, unaweza kubadilisha tabia hiyo ili upate mpangilio unaotaka.

Uelewa wa display ni muhimu sana katika kupanga layout na kuficha au kuonyesha element kwa njia sahihi.

✅ 1. display: block

• Element huanza kwenye mstari mpya.

• Huchukua upana wote wa mzazi wake kwa default.

• Mfano wa element za block: div, p, h1-h6, section, article

div {
  display: block;
}

? Matokeo: kila element huonekana kwenye mstari wake, kama vichwa vya habari au aya.

✅ 2. display: inline

• Element haianzi mstari mpya.

• Huchukua nafasi sawa na content yake.

• Huwezi kuweka width, height, margin-top/bottom kwa ufanisi.

span {
  display: inline;
}

? Mfano mzuri: maneno yaliyopo ndani ya span au viungo vya a.

✅ 3. display: inline-block

• Huchukua tabia ya block na inline kwa pamoja.

• Huweza kuwa kwenye mstari mmoja kama inline.

• Lakini pia unaweza kudhibiti width, height, margin, padding kama block.

img {
  display: inline-block;
  width: 150px;
  height: 100px;
}

? Hii ni nzuri kwa element ndogo zinazohitaji ukubwa wa kudhibitiwa kama button au picha.

✅ 4. display: none

• Huficha kabisa element kutoka kwenye ukurasa.

• Element haionekani wala haichukui nafasi yoyote.

div {
  display: none;
}

? Tofauti na visibility: hidden, ambapo element haionekani lakini nafasi yake inabaki.

✅ 5. Kulinganisha kwa Haraka

✅ 6. Mfano Kamili:

<div style="display: block; background: lightgreen;">Block Element</div>
<span style="display: inline; background: lightblue;">Inline Element</span>
<div style="display: inline-block; width: 100px; height: 50px; background: pink;">Inline-Block</div>
<div style="display: none;">Hii haionekani kabisa</div>

✅ Hitimisho

display ni property ya msingi sana kwenye CSS. Kwa kuitumia vizuri, unaweza kupanga vipengele vya tovuti yako kwa usahihi zaidi na kwa mtindo unaotakiwa. Kuelewa tofauti kati ya block, inline, inline-block, na none ni hatua muhimu katika kuelekea kwenye layout nzuri.

? Somo Linalofuata: SOMO LA 14 - Position Property

Tutajifunza kuhusu static, relative, absolute, fixed, na sticky, na jinsi zinavyowekwa kwenye layout.

? Maswali ya Kujitathmini

1. display: block; hufanya nini?
   a) Huficha element
   b) Huweka element kwenye mstari mmoja
   c) Huanza mstari mpya na hutumia upana wote
   d) Hufanya element iwe button

2. Ni ipi kati ya hizi hairuhusu kutumia width na height?
   a) block
   b) inline
   c) inline-block
   d) Zote zinaweza

3. display: none; ina athari gani?
   a) Element haionekani lakini nafasi inabaki
   b) Element haionekani wala haichukui nafasi
   c) Element inazimwa kwa muda
   d) Inaficha text pekee

4. Tofauti ya inline na inline-block ni ipi?
   a) Hakuna tofauti
   b) inline-block huruhusu padding na margin
   c) inline ni block element
   d) inline-block haionekani

5. Ili element iweze kuonyesha kama text lakini idhibitiwe kwa ukubwa, utatumia?
   a) display: none
   b) display: block
   c) display: inline
   d) display: inline-block