Attendi ...

Il collasso dei margini CSS nel box model

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.

04.04.2012

Ti potrebbero interessare

WordPress: aggiornarlo è fondamentale per Sicurezza e Prestazioni

Aggiornare WordPress è fondamentale

Mantenere sempre aggiornato il proprio sito web WordPress è di fondamentale importanza per diversi motivi:

Sicurezza: le versioni più recenti di WordPress spesso includono correzioni di sicurezza per vulnerabilità che sono state scoperte nelle versioni precedenti. Mantenere il software aggiornato aiuta a proteggere il tuo sito da minacce di sicurezza e a prevenire potenziali [...]
26.01.2024
Dettagli

Indirizzo Email e Sito Internet personali

Il potere di Indirizzo Email e Sito Internet Personali

L'importanza, anche per una persona di avere un indirizzo email e un sito internet con il proprio nome

Viviamo in un'era digitale in cui la presenza online è diventata essenziale per connettersi con il mondo circostante. Uno degli strumenti fondamentali per affermare la propria identità digitale è rappresentato dall'indirizzo email e dal sito internet [...]

10.01.2024
Dettagli

PHP 8.3 disponibile sui nostri piani

A partire dal mese di Dicembre abbiamo iniziato ad introdurre su tutti i nostri servizi di Hosting Linux, Hosting WordPress, Hosting Multidominio e Cloud Hosting, la possibilità di utilizzare anche l'ultima versione stabile di PHP 8.3.

Come di consueto, dal proprio pannello di amministrazione è possibile modificare in autonomia la versione di PHP utilizzata per il proprio dominio o [...]

01.12.2023
Dettagli