CSS - Hojas de estilo - La regla del 0_0

Este truco, me lo enseñó morris hace unos meses, y desde entonces, debo confesar que mis relaciones con CSS han mejorado bastante.

---

Una de las pesadillas de trabajar con CSS son los márgenes y los rellenos (margin y padding), ya lo vimos cuando estudiábamos la teoría de las "cajas".

---

También es muy notable el tema con las listas, que para indentarlas, unos navegadores le aplican un margen y en cambio otros un relleno.

---

Los encabezados, los párrafos etc, suelen llevar algún margen que es ligeramente diferente en unos y otros navegadores y nos pasamos la vida volviéndonos locos para ajustar los elementos y que se vean igual.

---

El truco es drástico pero simple: quitar todos los rellenos y todos los márgenes que por defecto aplican los navegadores.

---

Desde que morris me lo enseñó, cada vez que empiezo una hoja de estilo, antes de hacer cualquier otra cosa, quito márgenes y rellenos, mi vida ha cambiado.

---

|| Código: ||
|| * {
   padding:0;
   margin:0;
} ||


Con este código quitas el margen y el relleno a cualquier elemento que haya, y así los controlas tú.

---

Controlar el margen de cada elemento uno por uso puede ser toda una tarea, así que lo más cómodo, como nos indica Richard Rutter en Resetting default padding and margin, le aplicamos un margen global a todos los elementos de bloque, así tenemos a todos por igual en todos los navegadores:

---

|| Código: ||
|| h1, h2, h3, h4, h5, h6, p, blockquote,
 form, label, ul, ol, dl, fieldset, address {
    margin-bottom: 1em;
} ||

---

Y listo. Probadlo, funciona!