Margini, larghezze e collasso: controllare lo spazio tra elementi inline e block

Introduzione

Quando si studia la differenza tra elementi inline e block-level, è comune concentrarsi soltanto sul fatto che un elemento occupi o meno un’intera riga. Tuttavia, il comportamento del flusso del documento diventa ancora più interessante quando entrano in gioco margini, larghezze e collasso dei margini verticali.

Un elemento block-level, come <div>, <p> o <section>, parte normalmente da una nuova riga e può avere una larghezza, un’altezza, margini e padding. Un elemento inline, come <span>, <strong> o <a>, rimane invece all’interno della riga di testo e segue il flusso delle parole.

Capire come vengono calcolati gli spazi è fondamentale per evitare layout imprevedibili. Un esempio tipico è il collasso dei margini verticali: due margini verticali adiacenti di elementi block non vengono sempre sommati, ma possono fondersi in un unico margine pari al maggiore dei due.

In questo tutorial costruiremo una piccola pagina di articoli per osservare:

• come funzionano larghezza, padding e bordo degli elementi block;
• perché i margini verticali possono collassare;
• perché i margini orizzontali degli elementi inline si comportano diversamente;
• come usare un contenitore per controllare il flusso senza ricorrere a soluzioni casuali.

Codice completo

Il seguente esempio contiene HTML e CSS. Il CSS è inserito nel blocco di codice soltanto per rendere l’esempio autonomo e facilmente testabile in un file HTML.

<main class="pagina">
  <article class="scheda">
    <h1>Imparare il flusso del documento</h1>

    <p class="introduzione">
      Il testo può contenere elementi <strong>inline</strong>
      senza interrompere la riga.
    </p>

    <p class="messaggio">
      Questo paragrafo ha un margine inferiore di 32px.
    </p>

    <p class="nota">
      Questo paragrafo ha un margine superiore di 20px.
      I due margini verticali possono collassare.
    </p>

    <p class="collegamento">
      Scopri <a href="#approfondimento">l’approfondimento</a>
      sull’organizzazione dei contenuti.
    </p>
  </article>
</main>

/* Area principale della pagina */
.pagina {
  width: 80%;
  max-width: 720px;
  margin: 0 auto;
}

/* Un elemento block con bordo e padding */
.scheda {
  padding: 24px;
  border: 2px solid #3366cc;
  background-color: #f4f7ff;
}

/* Il margine inferiore è di 32px */
.messaggio {
  margin-bottom: 32px;
}

/* Il margine superiore è di 20px */
.nota {
  margin-top: 20px;
}

/* Gli elementi inline restano nella stessa riga del testo */
.collegamento a {
  margin-left: 8px;
  margin-right: 8px;
}

Spiegazione

Il modello a scatola degli elementi block

Ogni elemento block può essere interpretato come una scatola composta da quattro aree:

• contenuto: testo o elementi figli;
• padding: spazio interno tra contenuto e bordo;
• border: il bordo dell’elemento;
• margin: spazio esterno che separa l’elemento dagli altri.

Nel codice, .scheda possiede un padding di 24px e un bordo di 2px. Questi spazi aumentano l’area visibile della scheda, ma non sono parte del contenuto testuale. Il margin, invece, si trova all’esterno e influenza la distanza tra la scheda e gli elementi circostanti.

Il collasso dei margini verticali

Consideriamo i due paragrafi seguenti:

.messaggio {
  margin-bottom: 32px;
}

.nota {
  margin-top: 20px;
}

A prima vista si potrebbe pensare che la distanza tra i due paragrafi sia di 52px, cioè la somma di 32px e 20px. Nel normale flusso block, però, i due margini verticali adiacenti possono collassare. In questo caso la distanza effettiva tende a essere pari al margine maggiore: 32px.

Il collasso dei margini riguarda principalmente i margini verticali di elementi block nel normale flusso. Non avviene nello stesso modo con i margini orizzontali, con gli elementi inline o quando intervengono determinati contesti di formattazione.

Come impedire il collasso

Se è necessario controllare con precisione lo spazio, si può introdurre un elemento contenitore con padding o bordo. Anche un nuovo contesto di formattazione, ottenuto ad esempio tramite display: flow-root, può isolare il comportamento interno del contenitore.

.gruppo-isolato {
  display: flow-root;
  padding-top: 1px;
}

Il valore flow-root crea un nuovo contesto di formattazione block. È una soluzione moderna e leggibile quando si desidera contenere il flusso interno senza usare hack come elementi vuoti o clearfix basati su pseudo-elementi.

Elementi inline e spazi orizzontali

Un link, una parola evidenziata con <strong> o uno <span> si comporta come parte della riga. I margini orizzontali possono contribuire alla distanza tra elementi inline, mentre altezza e larghezza non funzionano esattamente come negli elementi block.

Ad esempio, impostare width su un elemento inline non produce normalmente l’effetto atteso. Se serve controllare larghezza, altezza o padding verticale in modo più prevedibile, è possibile usare display: inline-block.

.etichetta {
  display: inline-block;
  padding: 6px 10px;
  margin-right: 8px;
  border-radius: 4px;
  background-color: #e3ecff;
}

inline-block mantiene l’elemento all’interno della riga, ma gli permette di comportarsi in molti aspetti come una piccola scatola: può avere larghezza, altezza, padding e bordi controllabili.

Best practice

• Usa il padding per lo spazio interno: se vuoi separare il contenuto dal bordo di una scheda, preferisci il padding al margin.
• Usa il margin per separare elementi distinti: il margin descrive la distanza esterna tra blocchi diversi.
• Non sommare automaticamente i margini verticali: verifica sempre il comportamento reale del collasso.
• Definisci una direzione coerente per i margini: applicare soltanto margin-bottom ai blocchi di una lista può rendere il layout più prevedibile.
• Usa gap nei layout moderni: con Flexbox o Grid, gap è spesso più chiaro dei margini per gestire la distanza tra elementi.
• Ricorri a inline-block con uno scopo preciso: è utile per badge, etichette e piccoli controlli, ma non dovrebbe sostituire Flexbox o Grid per layout complessi.
• Evita elementi vuoti per creare spazio: lo spazio dovrebbe essere gestito dal CSS, non da numerosi <br> o contenitori senza significato.
• Controlla il box model: box-sizing: border-box rende più intuitivo il calcolo di larghezze e altezze includendo padding e bordo.

Riepilogo

Il flusso del documento non determina soltanto la posizione iniziale degli elementi. Stabilisce anche come vengono calcolati gli spazi tra blocchi e come gli elementi inline partecipano alle righe di testo.

Gli elementi block possono avere dimensioni, padding, bordi e margini completi. I loro margini verticali adiacenti possono collassare, quindi non sempre la distanza finale corrisponde alla somma dei valori dichiarati. Gli elementi inline, invece, rimangono integrati nel testo e hanno un comportamento più limitato rispetto a larghezza e altezza. Quando serve una via intermedia, inline-block consente di mantenere l’elemento nella riga offrendo maggiore controllo sulla sua scatola.

Conoscere il collasso dei margini e il box model permette di costruire interfacce più prevedibili, riducendo correzioni casuali e valori arbitrari nel CSS.

Approfondisci con risorse ufficiali