Summary  
This chapter explains CSS inline elements’ default display behavior and box model constraints, showing that their width and height can’t be explicitly set and only horizontal padding, margin, and border properties take effect.

General domain of usage  
Web page styling and layout.

**Gli elementi inline** rimangono su una singola riga e vanno a capo solo quando lo spazio termina. Questo comportamento è controllato dalla proprietà CSS `display: inline`.

Punti chiave sugli elementi inline:
- Per impostazione predefinita hanno `display: inline`;
- La loro larghezza e altezza sono determinate dal contenuto e non possono essere impostate esplicitamente;
- È possibile applicare solo proprietà orizzontali come `padding`, `margin` e `border`.

Analizziamo un esempio in cui alcuni stili influenzano l'elemento, mentre altri no, all'interno del file CSS:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxhIGhyZWY9Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vIiB0YXJnZXQ9Il9ibGFuayI+R29vZ2xlPC9hPgogIDwvYm9keT4KPC9odG1sPg==

LyogVGhlc2UgcHJvcGVydGllcyB3b3JrICovCmEgewogIGJvcmRlci1sZWZ0OiAxcHggc29saWQgZmlyZWJyaWNrOwogIGJvcmRlci1yaWdodDogM3B4IGRhc2hlZCBzZWFncmVlbjsKICBwYWRkaW5nLWxlZnQ6IDEwcHg7CiAgcGFkZGluZy1yaWdodDogNXB4OwogIG1hcmdpbi1sZWZ0OiA1cHg7CiAgbWFyZ2luLXJpZ2h0OiAxNXB4Owp9CgovKiBUaGVzZSBwcm9wZXJ0aWVzIGRvbid0IHdvcmsgKi8KYSB7CiAgd2lkdGg6IDMwMHB4OwogIGhlaWdodDogNTAwcHg7CiAgbWFyZ2luLXRvcDogNTBweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9

Per impostazione predefinita, gli elementi **inline** presentano uno spazio vuoto sul lato destro; per gli elementi `img`, questo spazio si trova nella parte inferiore. Questo spazio non è attribuito a `padding` o `margin`. Si tratta invece di uno spazio vuoto intrinseco aggiunto dai browser per garantire una distanza tra ciascun elemento.

Approfondisci

PGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHNwYW4+VGV4dC0xPC9zcGFuPgogICAgPHNwYW4+VGV4dC0yPC9zcGFuPgogICAgPHNwYW4+VGV4dC0zPC9zcGFuPgogIDwvYm9keT4KPC9odG1sPg==

Apprendi le nozioni fondamentali di CSS (Cascading Style Sheets), il linguaggio di stile che trasforma l'aspetto e la presentazione 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. Ideale per principianti che desiderano costruire una solida base in CSS.

Scopri cosa è CSS, come collegarlo a HTML e come stilizzare gli elementi HTML utilizzando i selettori. Esplora concetti fondamentali come i colori del testo, le pseudo-classi di azione utente e le variabili in CSS.

Scopri come formattare e stilizzare il testo nelle tue pagine web. Impara ad applicare font personalizzati ed esplora le diverse proprietà dei font per migliorare l'aspetto del testo.

Apprendere i fondamenti del modello a scatola, che definisce il layout e la spaziatura degli elementi in una pagina web. Esplorare concetti come dimensionamento delle scatole, aggiunta di spazio agli elementi, lavoro con elementi a livello di blocco e inline, e utilizzo di pseudo-classi strutturali e funzionali per una stilizzazione avanzata.

Scopri Flexbox, un potente metodo di layout CSS per disporre gli elementi in righe e colonne. Impara a controllare la direzione, l'allineamento e la spaziatura degli elementi orizzontalmente e verticalmente, oltre a personalizzare i singoli elementi flex per layout precisi.

Scopri come migliorare l'aspetto visivo delle tue pagine web con CSS. Esplora tecniche per applicare colori e immagini di sfondo, stilizzare le immagini, utilizzare pseudo-elementi decorativi e aggiungere ombre per creare design accattivanti.

Lavorare con Elementi Inline

Awesome!

Lavorare con Elementi Inline