Menene bambanci tsakanin abubuwa na block da inline?

Question

Accepted Answer

Kowane abu yana da abin **display** na tsohuwa da yake kontrol ta yadda yake kwararar a cikin tsari. - Abubuwa na **block** suna fara a **sabuwar layi** kuma suna ɗaukar **dukiyar daɗi cikakke**. Suna yarda da width/height da duk margins/paddings. Misalai: `

`, `

`, `
`, `
`. - Abubuwa na inline suna kwararar a cikin layi, kawai gina kamar abincin su ne, kuma suna sare width/height da margins na sama/bottom. Misalai: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Me yasa ya matukar mahimmanci ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Saita `width`/`height` akan abu na inline ba zai yi komi ba. Gyarawa ita ce canza display sa: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — mafi kyau na dukansu `inline-block` yana zaune a odar rubutu (gefe da gefe) da* girmama width/height/margins — kyau sosai don abubuwan shiryarwa, alamun iko, ko maɗaukakin alaɗa a tsari. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Me yasa ya matukar mahimmanci Allakari na nunin display ba tare da komai ba ya bayyana da yasa `` naka ba zai ɗaukar tsawo ba, da yasa `
` ke tunda, da lokaci da zai kamata a canza zuwa `inline-block`, `flex`, ko `grid`. Gina ne ta yadda abubuwa ke ajiye ba tare da abin da zai dauki tsarin tsari ba.