CSS  »  Articoli  »  Mondo CSS 

In chiusura dell'articolo Controllare i margini abbiamo parlato brevemente del global white space reset, ovvero la tecnica che consente di azzerare margini e padding di default del browser da tutti gli elementi.

I browser, infatti, per consentire una discreta presentazione in assenza di fogli di stile, attribuiscono di default margini e padding ad alcuni elementi: si tratta tipicamente di elementi block-level quali titoli, paragrafi, liste, blockquote, form e fieldset solo per citarne alcuni. I valori di default di margini e padding per tali elementi non sono noti a priori, e sono differenti sui diversi browser.

La tecnica del global whitespace reset si propone quindi di annullare queste due proprietà, per poi specificarle in maniera constistente. Tratteremo qui la tecnica in maniera approfondita, considerando pro, contro e alternative.

Global white space reset

Nell'articolo CSS Negotiation and a Sanity Saving Shortcut pubblicato a fine 2004, Andrew Krespanis presenta l'idea alla base del global white space reset: per evitare inconsistenze di spaziature nei diversi browser, basta settare margin e padding a zero per tutti gli elementi. L'operazione avviene attraverso una semplice regola che usa il selettore universale, che creerà una regola indirizzata a tutti gli elementi di pagina. Eccola:

La tecnica è stata ripresa nell'articolo Global whitespace reset che presenta ed espande la tecnica progressivamente. Oltre ad azzerare margini e padding, è infatti indispensabile ridefinirli. Ecco quindi la soluzione finale che Krespanis propone:

Si può vedere l'effetto del codice CSS sopra riportato nell'esempio con cui Krespanis accompagna l'articolo. Con questo articolo Krespanis ha proposto una tecnica semplice ed efficace per livellare i margini e padding di default, non esente però da difetti. Vediamoli.

Altri articoli

Altre guide

Altre newsletter