Desarrollo y diseño de páginas Web y Marketing Digital
Catálogo de publicaciones

Tabla de medidas de altura y anchura en CSS

Aprender a usar correctamente las medidas de altura y anchura en CSS es fundamental para crear sitios web modernos, responsivos y visualmente consistentes. En esta guía encontrarás una tabla comparativa con las unidades más comunes como px, %, em, rem, vw y vh, explicadas de forma sencilla. Descubre cuándo usar cada unidad para adaptar tus diseños a distintos dispositivos y mejorar la experiencia de usuario. Ideal para desarrolladores web, diseñadores y principiantes que quieren dominar las bases del diseño web con CSS.

Medida Tipo Significado / Comportamiento Ejemplo
px Absoluta Píxeles. Tamaño fijo sin importar el tamaño de pantalla o zoom del navegador. width: 300px;
% Relativa Porcentaje respecto al elemento contenedor (padre). width: 50%;
em Relativa Basado en el tamaño de fuente del elemento padre. width: 10em;
rem Relativa Basado en el tamaño de fuente root (html). width: 10rem;
vw Relativa Porcentaje del ancho visible del viewport (pantalla del navegador). width: 50vw;
vh Relativa Porcentaje del alto visible del viewport. height: 80vh;
auto Automática Se ajusta automáticamente al contenido o contexto. width: auto;
min-content Intrínseca Se ajusta al tamaño mínimo requerido para mostrar el contenido. width: min-content;
max-content Intrínseca Se ajusta al tamaño máximo del contenido sin que se rompa. width: max-content;
fit-content Intrínseca Se ajusta al contenido, pero con un límite definido por el contenedor. width: fit-content;

 

🧩 Consejos para entender cómo se comportan:

  • Usa px si quieres algo fijo, como una imagen de 300px.

  • Usa % cuando quieras que algo se adapte al tamaño del contenedor.

  • Usa vw/vh si quieres que el tamaño responda al tamaño de pantalla (ideal para layouts full-screen).

  • Usa rem/em para diseños accesibles y adaptativos (basados en el texto).

  • Usa auto cuando no sabes el tamaño y solo quieres que se ajuste al contenido.

Atrás