Una de las razones por la que es dificil diseñar una buena página web son las diferencias que los elementos (X)HTML muestran en el whitespace por defecto en los principales navegadores. Unificando esas diferencias habremos dado un paso en la dirección correcta.
Cuando me refiero al whitespace hago referencia al espacio en blanco que hay alrededor de los elementos (X)HTML La idea no es nueva, pero los resultados merecen la pena, algo radical pero efectivo: eliminamos de cuajo todo el padding y el margin para todos los elementos (X)HTML:
padding:0;
margin:0;
}
De una manera abrupta y sesgada nos cargamos cualquier diferencia que pueda haber entre navegadores a la hora de tratar el espacio en blanco y esa es precisamente la gracia del invento, que si necesitamos que un determinado elemento tenga un determinado padding o margin, se lo damos nosotros y es por lo tanto un valor que conocemos de antemano y podemos planificar sus consecuencias en el aspecto final de nuestra página a priori.
Claro está que si nos limitamos solo a ponerlo todo a cero no haremos nada si no damos unos valores por defecto a los elementos que solemos utilizar con mas frecuencia. Un ejemplo seria el siguiente:
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address {
margin:1em 5%;
}
li, dd {
margin-left:5%;
}
fieldset {
padding: .5em;
}
option { /* Firefox fix */
min-width: 1.5em;
}
La idea original no es mía: este artículo viene a decir en castellano más o menos lo que Andrew Krespanis explica con más detalle en su página web. Merece la pena leer la nutrida lista de comentarios para profundizar en los pros y contras de usar esta técnica, pero que en general podemos decir que es preferible aplicarla.