Recentemente l'uso dei margini negativi ha aperto nuove possibilità nella creazione di layout basati sui CSS. Si pensi a tecniche come Any Ordered Columns e Multi-unit Any Ordered Columns.
La documentazione sui margini delle specifiche CSS è piuttosto chiara per quanto riguarda i collapsing margins e sono disponibili articoli molto dettagliati sul trattamento dei margini verticali: meritano una lettura attenta No margin for error,
Uncollapsing margins e Auto-height and margin Collapsing.
Mancano purtroppo risorse così approfondite in merito ai margini orizzontali e a quelli negativi. Cercherà qui di definire i punti essenziali per la comprensione di questi due aspetti.
- I margini possono avere valori sia positivi che negativi;
- possono essere espressi in tutte le unità di misura CSS e in percentuale;
- i margini orizzontali non collassano;
- valori percentuali dei margini orizzontali di un elemento si riferiscono alla larghezza del suo contenitore;
- Per elementi senza larghezza specifica (che non siano float o posizionati assolutamente) i margini orizzontali hanno effetto sull'area di contenuto: margini orizzontali positivi restringono un'elemento, quelli negativi lo allargano. Tali modificazioni di larghezza possono avvenire su uno o entrambi i lati;
- i margini orizzontali su elementi a larghezza determinata che non siano float nè posizionati assolutamente hanno l'effetto di traslarli o di allontanare/avvicinare eventuali elementi adiacenti sui lati;
- per elementi float i margini orizzontali negativi concordi con il senso del float hanno
l'effetto di traslare l'elemento verso (e/o oltre) il corrispondente estremo della finestra; - per elementi float i margini orizzontali negativi opposti al senso del float non
hanno effetto sull'elemento stesso, ma solo quello di cedere spazio a elementi adiacenti; - i margini di elementi posizionati assolutamente non hanno nessun effetto su altri elementi,
in quanto questi vengono rimossi dal flusso di pagina.
In conclusione, un piccola nota pratica: Internet Explorer soffre di un noto bug che raddoppia
il margine orizzontale (solo se tale valore è positivo) concorde con il lato in cui sono resi float.
Un modo semplice per sistemare le cose è dichiarare l'elemento display:inline: dato che elementi float vengono resi di default block-level, la dichiarazione non avrà effetto sugli altri
browser.
