Summary  
This chapter explains the CSS display property by detailing the behaviors and styling capabilities of block, inline, and inline-block elements and how they impact element layout and spacing.

General domain of usage  
Front-end web page layout and styling

Gli elementi HTML si comportano in modo diverso a seconda che siano **blocco**, **inlinea** o **inline-block**. Questi tipi di visualizzazione influenzano il layout, la spaziatura e le proprietà CSS utilizzabili.

## Elementi di Blocco 
- Iniziano su una **nuova riga**;
- Occupano l'**intera larghezza** del loro contenitore;
- Supportano larghezza, altezza, margine, padding e bordo.

Esempi comuni: `<div>`, `<p>`, `<ul>`, `<li>`, `<h1>–<h6>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxvbD4KICAgICAgPGxpPjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD48L2xpPgogICAgICA8bGk+PHA+TG9yZW0gaXBzdW08L3A+PC9saT4KICAgICAgPGxpPjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD48L2xpPgogICAgPC9vbD4KICAgIDx1bD4KICAgICAgPGxpPjxoND5Mb3JlbSwgaXBzdW0uPC9oND48L2xpPgogICAgICA8bGk+PGg0PkxvcmVtLCBpcHN1bSBkb2xvci48L2g0PjwvbGk+CiAgICAgIDxsaT48aDQ+TG9yZW0sIGlwc3VtIGRvbG9yLjwvaDQ+PC9saT4KICAgIDwvdWw+CiAgPC9ib2R5Pgo8L2h0bWw+

aDQgewogIHBhZGRpbmc6IDEycHg7Cn0KCnAgewogIGJvcmRlcjogMXB4IHNvbGlkIHRhbjsKfQ==

## Elementi Inline
- Rimangono **sulla stessa linea**;
- Occupano solo lo **spazio necessario per il loro contenuto**;
- Non è possibile applicare larghezza o altezza (ma il bordo funziona).

Esempi comuni: `<a>`, `<span>`, `<img>`, `<input>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIC8+CiAgICA8c3Bhbj5Mb3JlbSwgaXBzdW0gZG9sb3IuPC9zcGFuPgogICAgPGEgaHJlZj0iIyI+TG9yZW0sIGlwc3VtLjwvYT4KICAgIDxzcGFuPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyLjwvc3Bhbj4KICA8L2JvZHk+CjwvaHRtbD4=

c3BhbiB7CiAgYm9yZGVyOiAycHggc29saWQgd2hlYXQ7Cn0=

## Elementi Inline-Block
- Rimangono **inline**, come il testo;
- Supportano **larghezza**, **altezza**, **margine**, **padding** e **bordo**, come gli elementi block.

Esempi: `<button>`, `<select>`, `<textarea>`.

Sono utili quando è necessario che gli elementi siano affiancati, ma si desidera comunque il pieno controllo dello stile.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0ic2VuZC1idG4iPlNlbmQgcmVxdWVzdDwvYnV0dG9uPgogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGNsYXNzPSJzdWJtaXQtYnRuIj5TdWJtaXQgZm9ybTwvYnV0dG9uPgogIDwvYm9keT4KPC9odG1sPg==

LyogU2V0IGNvbW1vbiBzdHlsZXMgZm9yIGFsbCBidXR0b24gZWxlbWVudHMgKi8KYnV0dG9uIHsKICBjdXJzb3I6IHBvaW50ZXI7Cn0KCi5zZW5kLWJ0biB7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIGJhY2tncm91bmQtY29sb3I6IHllbGxvd2dyZWVuOwogIGNvbG9yOiBzbGF0ZWJsdWU7CiAgZm9udC1zaXplOiAyNHB4Owp9Cgouc3VibWl0LWJ0biB7CiAgcGFkZGluZzogNXB4IDE4cHg7CiAgYm9yZGVyOiAxcHggc29saWQgYnJvd247CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Ymx1ZTsKICBjb2xvcjogZGFya2JsdWU7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQ==

Qual è la principale differenza tra elementi block e inline?

Apprendi le nozioni fondamentali di CSS, il linguaggio di stile che trasforma l'aspetto delle pagine web. Esplora concetti chiave come stili del testo, colori, spaziatura, box model, Flexbox ed effetti decorativi. Sviluppa le competenze necessarie per creare pagine web visivamente accattivanti e ben strutturate.

Comprendere come CSS si collega a HTML e come gli stili vengono applicati tramite i selettori. Applicazione di colori, stili del testo ed effetti hover per controllare la presentazione visiva.

Miglioramento della tipografia tramite altezza della linea, spaziatura, proprietà dei font e font personalizzati. Controllo delle famiglie di font, peso, stile e dimensione per una migliore leggibilità.

Controllo della struttura del layout tramite proprietà di margine, padding, bordi e larghezza. Comprensione del comportamento del dimensionamento del box e dei tipi di visualizzazione degli elementi come block, inline e inline-block.

Controllo dei layout orizzontali e verticali utilizzando le proprietà Flexbox. Regolazione della direzione, dell'allineamento e della spaziatura per strutturare i componenti dell'interfaccia utente.

Migliora i layout utilizzando colori di sfondo, immagini, pseudo-elementi e ombre. Stile dei componenti visivi per profondità e contrasto.

Property	Block	Inline	Inline-Block
New line	Sì	No	No
Full width	Sì	No	No
Width control	Sì	No	Sì
Height control	Sì	No	Sì

Proprietà Display: Block, Inline e Inline-Block

Elementi di Blocco

Elementi Inline

Elementi Inline-Block

Differenze principali