X'inhu d-differenza bejn elementi blokk u elementi inline?

Question

Accepted Answer

Kull element għandu imġieba **display** default li tikontolla kif jiġri fl-layout. - Elementi **Block** jibdew fuq **linja ġdida** u jieħdu l-**wisa' kompleta disponibbli**. Jieħdu wisa'/għoli u marġini/padding kollha. Eżempji: `

`, `

`, `
`, `
`. - Elementi Inline jiġru ġewwa linja, biss daqq sa l-wisa' tal-kontenut tagħhom, u jignuraw wisa'/għoli u marġini ta' fuq/taħt. Eżempji: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Gotcha prattiku ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Iddefinisci `width`/`height` fuq element inline ma tagħmel xejn. Il-fix huwa li tbiddel id-display tiegħu: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — l-aħjar miż-żewġ `inline-block` joqgħod fil-fluss tat-test (ġenb għal ġenb) u* jirrisspetta wisa'/għoli/marġini — perfett għal elementi ta' navigazzjoni, badges, jew buttons imqiegħda f'ringiela. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Għaliex dan importanti L-fahim tal-display default jispjega għaliex il-`` tiegħek ma tieħu għoli, għaliex `
` istakka, u meta tbiddel għal `inline-block`, `flex`, jew `grid`. Hija l-bażi ta' kif elements jingħaqdu qabel ma tapplika xi sistema layout.