display: block, inline, inline-block — differenze pratiche

Ogni elemento HTML ha un comportamento di visualizzazione predefinito. Ci sono decine di valori per la proprietà display (inclusi flex e grid che vedremo a breve), ma il 95% degli elementi HTML ricade nativamente in due categorie: Block e Inline.

1. Elementi di Blocco (display: block)

Pensa agli elementi di blocco come a mattoni impilati. Esempi nativi: <div>, <p>, <h1> - <h6>, <section>, <ul>, <li>.

Comportamento:

• Vanno sempre a capo: Iniziano sempre su una nuova riga. Nessun altro elemento può affiancarsi a loro di default.
• Larghezza massima: Si espandono in orizzontale occupando automaticamente il 100% della larghezza del loro genitore (salvo diversa indicazione).
• Box Model completo: Rispettano width, height, margin e padding su tutti i lati.

/* Puoi forzare un elemento inline a diventare blocco */
a.pulsante-largo {
  display: block; /* Il link ora si comporterà come un <div> */
  width: 100%;
}

2. Elementi Inline (display: inline)

Pensa agli elementi inline come a parole in una frase. Esempi nativi: <span>, <a>, <strong>, <em>, <img> (quest’ultimo con una piccola eccezione).

Comportamento:

• Fluttuano col testo: Non vanno a capo. Si affiancano uno all’altro da sinistra a destra, proprio come le parole che stai leggendo.
• Dimensioni bloccate: La loro larghezza e altezza è dettata esclusivamente dal loro contenuto (testo).
• Box Model limitato (ATTENZIONE!): Ignorano width, height, margin-top e margin-bottom. Puoi applicargli margin-left o padding, ma i valori verticali non allontaneranno mai le righe di testo sovrastanti o sottostanti!

span {
  width: 200px; /* Verrà ignorato completamente! */
  margin-top: 50px; /* Verrà ignorato completamente! */
}

Se hai provato a distanziare un link <a> verso il basso e non ha funzionato, ora sai perché: è un elemento inline.

3. Il meglio dei due mondi: inline-block

A volte vuoi che un elemento stia sulla stessa riga di un testo (inline), ma che rispetti contemporaneamente il box model (padding e margin verticali, larghezza fissa). La soluzione è display: inline-block.

Comportamento:

• Si affianca agli altri elementi senza andare a capo (come inline).
• Rispetta width, height, margin e padding verticali (come block).

È adatto per creare badge, piccole icone o pulsanti testuali che devono stare in mezzo a una riga ma necessitano di spaziatura verticale.

.badge-notifica {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  /* Ora width e height funzioneranno! */
}

Tabella Riassuntiva

Proprietà	Va a capo?	Accetta Width/Height?	Accetta Margini Verticali?
block	Sì	Sì	Sì
inline	No	No	No
inline-block	No	Sì	Sì

Oggi, per disporre oggetti in orizzontale si usa spesso Flexbox (argomento del prossimo modulo). Tuttavia, conoscere la differenza tra blocco e inline resta fondamentale per capire testi, link e pulsanti base.