Kuna tofauti gani kati ya elementi za block na inline?

Question

Accepted Answer

Kila elementi ina tabia ya **display** iliyobainisha kwa chaguo msingi ambayo inasimulia jinsi inavyotiririka katika mpangilio. - Elementi za **block** huanza kwenye **safu mpya** na huchukua **upana kamili unapatikana**. Yanakubali upana/urefu na taya zote/kushi. Mifano: `

`, `

`, `
`, `
`. - Elementi za inline hutiririka ndani ya safu, tu upana wa maudhui yao, na kupuuza upana/urefu na taya za juu/chini. Mifano: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Mjinga wa vitendo ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Kuweka `width`/`height` kwenye elementi ya inline haufanyi kitu. Suluhisho ni kubadilisha display yake: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — mavumbi mabaya ya zote mbili `inline-block` inakamatia katika mtiririko wa maandishi (upande kwa upande) na* inaheshimu upana/urefu/taya – kamili kwa vipengele vya uabiri, bella au kitufe kilichotengana katika safu. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Kwa nini ni muhimu Kueleweana na display iliyobainishwa kwa chaguo msingi kunabainisha kwa nini `` yako haitakubali urefu, kwa nini `
`-atu hina gurudumu, na ni lini ya kubadilisha kwenda `inline-block`, `flex` au `grid`. Ni msingi wa jinsi vipengele vinavyofungwa kabla ya kutumia mfumo wowote wa mpangilio.