Il collasso dei margini verticali è uno di quei comportamenti che i fogli di stile hanno ereditato dai browsers di prima generazione, quando il CSS ancora non esisteva. Prima di capire come funziona, inquadriamo l'argomento. Il collasso dei margini entra in gioco solamente se

  • Abbiamo due o più elementi di blocco adiacenti o innestati
  • Si parla di margini verticali (margin-top o margin-bottom)

Il collasso non si applica nel caso di margini orizzontali, né per gli elementi in linea. La motivazione del collasso dei margini verticali è dettata dal buon senso. Consideriamo una sequenza di elementi HTML

<span>A plain span element</span>

<p style="MARGIN:1px 0px;">First paragraph</p>

<p style="MARGIN:20px 0px;">Second paragraph</p>

<p style="MARGIN:20px 0px;">Third paragraph</p>

<span>Another plain span element</span>

che viene renderizzata grossomodo così

Collasso del margine verticale (elementi adiacenti)

Collasso del margine verticale (elementi adiacenti)

come si vede dalla figura, la distanza tra il 2° e il 3° paragrafo è di 20px, e non di 40px, come ci si potrebbe aspettare sommando il margine inferiore del 2° paragrafo (pari a 20px) con il margine superiore del 3° paragrafo (pari a 20px). Questo comportamento si chiama collasso del margine verticale, perché i due margini sono stati “uniti” in un unico margine, anziché sommati. E' un comportamento che nella maggior parte dei casi torna comodo, perché permette di garantire il rispetto dei margini impostati. La regola del collasso del margine verticale è la seguente:

Quando due o più elementi di blocco sono adiacenti o nidificati, il margine verticale è pari al massimo dei valori dei singoli margini.

La regola permette di identificare la dimensione del margine verticale senza ambiguità. Consideriamo ad esempio

<p style="MARGIN:10px 0px;">First paragraph</p>

<p style="MARGIN:20px 0px;">Second paragraph</p>

Il primo paragrafo ha un margin-bottom pari a 10px, per cui si aspetta che l'elemento successivo (il 2° paragrafo) si collochi 10px più in basso. Il secondo paragrafo ha margin-top pari a 20px, quindi cercherebbe di posizionarsi 20px sotto il precedente. Quale di queste due distanze separerà i paragrafi, quando verranno renderizzati da un browser? Se il margine effettivo risultasse la somma dei due (30px) non avremmo rispettato nessuno dei due stili: scegliendo invece il valore massimo (20px) si ottiene un buon compromesso, dettato dal buon senso.

Fin qui tutto bene. Il collasso dei margini verticali può invece risultare scomodo se trattiamo degli elementi di blocco nidificati l'uno dentro l'altro, ovvero annidati o innestati. Prendiamo un paio di div annidati e vediamo cosa succede

<span>A plain <code>span</code> element</span>

<div style="MARGIN:10px 0px; BACKGROUND-COLOR:blue;">

<div style="MARGIN:20px 0px; BACKGROUND-COLOR:cyan;">

Content

</div>

</div>

in seguito al collasso dei margini verticali, in questo caso avremo un unico margine verticale, pari al massimo tra i valori 10px e 20px, che è 20px. La novità è che adesso tale margine verrà applicato solamente all'elemento esterno, ovvero al div contenitore.

Collasso del margine verticale (elementi nidificati)

Collasso del margine verticale (elementi nidificati)

il risultato è che il div interno, quello di colore cyan, non sarà separato dal div esterno, ma i due elementi risulteranno “incollati verso l'alto”, come se avessero lo stesso bordo superiore. In altre parole avremo un margine di 20px per il div esterno (anche se è settato a 10px), e un margine di 0px sul div interno (anche se è settato a 20px).

Nel caso degli elementi di blocco annidati, il collasso dei margini può risultare fastidioso. Per evitarlo possiamo sfruttare le condizioni che inibiscono il collasso. Il collasso verticale infatti non avviene nel caso che:

  • Se l'elemento contenitore ha un bordo
  • Se l'elemento contenitore ha un valore di padding
  • Se uno degli elementi è “galleggiante” (float)
  • Se uno degli elementi ha posizione assoluta (position: absolute)

Un altro modo di risolvere il problema potrebbe essere quello di sfruttare la proprietà CSS overflow, che però merita di essere trattata a parte e preferiamo non introdurla oggi. Le quattro condizioni elencate qui sopra dovrebbero essere sufficienti per controllare il layout verticale del box model.... senza margine d'errore.

Ti potrebbero interessare

Web design, sette fattori chiave

Quando si progetta un sito Web ci sono molti fattori chiave che contribuiranno a come viene percepito. Un sito web ben progettato può aiutare a creare fiducia e guidare i visitatori ad agire. Creare un'ottima esperienza utente implica [...]

Cos’è un webinar e tutto quello che c’è da sapere per crearlo

Hai mai partecipato a un webinar e ti sei detto: "Vorrei poterlo fare"? C’è la probabilità che tu abbia preso in considerazione l'idea di ospitare un webinar, ma che l’idea di pianificarlo, configurarlo e promuoverlo ti abbia [...]

Perché è diventato fondamentale curare la versione mobile dei siti

John Mueller di Google ha fornito nuove informazioni sul nuovo Mobile First Index. La grande novità è che i siti solo desktop saranno completamente eliminati dall'indice, spariti. La data stabilita per quella che sarà a tutti gli [...]

Cisco
DELL
Intel
NetApp
OnApp
Ripe