Cad an difríochtaí idir eilimintí bloc agus ionlíne?

Question

Accepted Answer

Tá iompraíocht **display** réamhshocraithe ag gach eilimint a rialú an t-sreabh atá aici sa leagan amach. - Tosú ar **líne nua** a dhéanann eilimintí **bloc** agus tógann siad an **leithead ar fáil iomlán**. Glacann siad le width/height agus gach margin/padding. Samplaí: `

`, `

`, `
`, `
`. - Sreabh laistigh de líne a dhéanann eilimintí ionlíne, níos leithid ná a n-ábhar amháin, agus neamhbhraistí ar width/height agus maranna barr/bun. Samplaí: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Cén fáth a bhíonn tábhacht ann ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Ní dhéanann socrú `width`/`height` ar eilimint ionlíne rud ar bith. An socrú ná a display a athrú: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — an dá shaol is fearr Suíonn `inline-block` i sreabh an téacs (taobh ar thaobh) agus* urraim a thabhairt do width/height/margins — foirfe do ghnéithe loingsithe, bachanna, nó cnaipe leagtha amach i ábhairín. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Cén fáth a bhíonn tábhacht ann Tuiscint a bheith agat ar display réamhshocraithe a mhíníonn cén fáth nach dtógfaidh do `` airde, cén fáth a chruthaíonn `
` a chéile, agus cathain ba cheart athrú go `inline-block`, `flex`, nó `grid`. Is é seo an bunús ar conas a dhéanann eilimintí socrú sula gcuireann tú aon chóras leagan amach i bhfeidhm.