¿Por qué resetear el CSS?

 


Cada navegador (Chrome, Firefox, Safari, etc.) tiene sus estilos por defecto. Por ejemplo:

  • Los <h1> tienen márgenes superiores e inferiores

  • El <body> tiene un margen de 8px aproximadamente

  • Las listas <ul> tienen un padding-left para los puntos

Esto hace que tu página se vea ligeramente diferente en cada navegador. El reset CSS elimina estas diferencias para que tú tengas el control total.

Tu código está BIEN, pero...

css
* {
    margin: 0;
    padding: 0;
}

Este selector universal (*) selecciona todos los elementos y les quita los márgenes y paddings. ¡Funciona perfectamente! Sin embargo, tiene una limitación importante que mencionaré después.

Reset CSS Mejorado (el que usan muchos profesionales)

Aquí tienes una versión más completa que soluciona problemas comunes:

css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* ¡Esto es clave! */
}

/* Opcional: También resetear la tipografía del body */
body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5; /* Mejor legibilidad */
}

¿Por qué el box-sizing: border-box es tan importante?

Sin box-sizing: border-box, cuando le pones un padding o border a un elemento, este se hace más grande de lo que esperabas.

Ejemplo sin border-box:

css
.caja {
    width: 200px;
    padding: 20px;
    /* El ancho REAL será: 200px + 20px(izq) + 20px(der) = 240px */
}

Ejemplo CON border-box:

css
* {
    box-sizing: border-box;
}

.caja {
    width: 200px;
    padding: 20px;
    /* El ancho REAL sigue siendo 200px (el padding se resta internamente) */
}

Resets CSS Famosos

Existen resets más completos creados por expertos que puedes copiar:

1. El de Eric Meyer (muy popular)

css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* ... y más estilos */

2. El de Normalize.css (más moderno)

No es un reset que elimina todo, sino que normaliza los estilos para que sean consistentes. Es el que usa Bootstrap, Tailwind, etc.

Puedes descargarlo de https://necolas.github.io/normalize.css/ o instalarlo vía npm.

Recomendación para empezar

Para tu nivel actual, tu código está perfecto. Solo te sugiero agregar el box-sizing:

css
/* Reset básico y efectivo */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos base para tu proyecto */
body {
    background-color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
}

Este reset:

  • ✅ Elimina márgenes y paddings molestos

  • ✅ Hace que el padding no descontrole tus medidas

  • ✅ No es demasiado agresivo

  • ✅ Fácil de recordar y usar

¡Y lo mejor es que funciona en el 99% de los casos! ¿Te sirvió la explicación?

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más