Margini orizzontali e negativi

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.

1. I margini possono avere valori sia positivi che negativi;
2. possono essere espressi in tutte le unità  di misura CSS e in percentuale;
3. i margini orizzontali non collassano;
4. valori percentuali dei margini orizzontali di un elemento si riferiscono alla larghezza del suo contenitore;
5. 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;
6. 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;
7. 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;
8. 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;
9. 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.