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

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.

Esercizi

Base · facile

Un <a> non rispetta width né margin-top. Qual è la causa e come lo correggi mantenendolo in linea con il testo?

a { display: inline-block; }

Intermedio · medio

Crea tre elementi: un pulsante a tutta larghezza (link reso block), un badge circolare con dimensioni fisse che sta in mezzo a una riga (inline-block), e una parola enfatizzata dentro un paragrafo (inline). Verifica con la tabella riassuntiva quale accetta width/height e margini verticali.

Sfida · difficile

Ti viene chiesto perché un menu di link orizzontale, stilato come inline, non rispetta il padding verticale richiesto dal design. Spiega il comportamento inline, mostra la correzione con inline-block, e indica perché oggi per lo stesso layout si preferirebbe Flexbox.