¿Por qué necesitas un reset?
Cada navegador aplica estilos por defecto diferentes a elementos HTML. Un CSS reset elimina esas diferencias para que tu diseño se vea consistente en todos los navegadores.
El reset esencial
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}¿Qué hace cada regla?
| Regla | Función |
|---|---|
margin: 0 | Elimina márgenes externos por defecto |
padding: 0 | Elimina rellenos internos por defecto |
box-sizing: border-box | Incluye padding y border en el width/height total |
Reset más completo (Recomendado)
/* Reset básico */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Eliminar bordes de imágenes */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* Heredar fuentes */
body {
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Reset de listas */
ul,
ol {
list-style: none;
}
/* Reset de enlaces */
a {
text-decoration: none;
color: inherit;
}
/* Reset de botones e inputs */
button,
input,
textarea,
select {
font: inherit;
}¿Dónde colocarlo?
Coloca el CSS reset al inicio de tu hoja de estilos principal:
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">Alternativas populares
| Reset | Tamaño | Uso |
|---|---|---|
| Universal (*) | 3 líneas | Proyectos simples |
| Modern Reset | ~20 líneas | Proyectos profesionales |
| Normalize.css | 8KB | Estándar de la industria |
| Tailwind Preflight | ~50 líneas | Con Tailwind CSS |
Mi recomendación
Para la mayoría de proyectos, el reset universal de 3 líneas es suficiente. Si necesitas más control, usa el reset completo de arriba.