Cila është ndryshimi midis elementeve bllok dhe inline?

Question

Accepted Answer

Çdo element ka një sjellje të paracaktuar **display** që kontrollon se si rrjedh në planimetrinë. - Elementet **bllok** fillojnë në një **rresht të ri** dhe zënë **gjerësinë e plotë të disponueshme**. Ato pranojnë gjerësi/lartësi dhe të gjitha margjina/mbushje. Shembuj: `

`, `

`, `
`, `
`. - Elementet inline rrjedhin brenda një rreshti, vetëm kaq të gjerë sa përmbajtja e tyre, dhe ignorojnë gjerësinë/lartësinë dhe margjina të sipërme/të poshtme. Shembuj: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Një gotcha praktik ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Vënia e `width`/`height` në një element inline nuk bën asgjë. Zgjidhja është të ndryshoni display-in e tij: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — më e mirja e të dyja `inline-block` qëndron në rrjedhën e tekstit (krah për krah) dhe* nderime gjerësinë/lartësinë/margjina – e përsosur për elementet e navigimit, odznaka ose butona të rreshtuar në një rresht. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Pse është e rëndësishme Kuptimi i display-it të paracaktuar shpjegon pse `` juaj nuk do të marrë një lartësi, pse `
`-at grumbullohen, dhe kur të kaloni në `inline-block`, `flex` ose `grid`. Ishte baza e mënyrës se si elementet rregullohen përpara se të zbatoni ndonjë sistem planimetrie.