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