Reset global del whitespace

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:

Lea el resto del artículo haciendo clic aquí

* {
  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;
}

Visto en Left Justified