Qual è la differenza tra elementi block e inline?

Question

Accepted Answer

Ogni elemento ha un comportamento **display** predefinito che controlla come fluisce nel layout. - Gli elementi **Block** iniziano su una **nuova riga** e occupano la **larghezza disponibile completa**. Accettano larghezza/altezza e tutti i margini/padding. Esempi: `

`, `

`, `
`, `
`. - Gli elementi Inline fluiscono all'interno di una riga, solo quanto è largo il loro contenuto, e ignorano larghezza/altezza e margini superiori/inferiori. Esempi: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Un gotcha pratico ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Impostare `width`/`height` su un elemento inline non fa nulla. La soluzione è cambiarne il display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — il meglio dei due mondi `inline-block` si inserisce nel flusso di testo (uno accanto all'altro) e* rispetta larghezza/altezza/margini — perfetto per voci di navigazione, badge o pulsanti disposti in una riga. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Perché è importante Comprendere il display predefinito spiega perché il tuo `` non accetterà un'altezza, perché i `
` si impilano, e quando passare a `inline-block`, `flex` o `grid`. È la base di come gli elementi si dispongono prima di applicare qualsiasi sistema di layout.