Cargando...

Alto y ancho CSS

Enmarcas una caja, la redondeas y le das espacio exterior e interior. Siguiente habilidad: decidir qué tan grande es la caja. width y height fijan el tamaño de la caja de contenido — qué tan ancha y qué tan alta debe ser esa zona central.

¿Qué hacen width y height?

width controla el tamaño horizontal. height controla el vertical. Los valores habituales usan longitudes como px o tamaños relativos como %. Si no los tocas, muchos elementos se dimensionan por su contenido y el contexto de layout.

Tamaño fijo en píxeles

Un inicio cotidiano claro: da a un panel un ancho exacto (y opcionalmente alto) en píxeles.

Ancho fijo en píxeles

css
CSS Code 
.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Ancho y alto juntos

Cuando el diseño necesita un rectángulo definido — marco de miniatura, baldosa, hueco de medios — fija ambos.

Ancho y alto en una baldosa

css
CSS Code 
.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}

Ancho porcentual

Un ancho % suele ser relativo al ancho del bloque contenedor (a menudo el padre). width: 50% significa «cerca de la mitad del ancho de mi padre», no la mitad de la pantalla por magia.

Mitad del ancho del padre

css
CSS Code 
.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}

Herramientas de tamaño de un vistazo

Además de width y height simples, CSS da barandillas.

📊 Herramientas de ancho y alto

Herramienta Rol Nota diaria
width / height Tamaño preferido de la caja de contenido Empieza aquí para tamaños fijos o fluidos
min-width / min-height No encoger por debajo Mantener botones o barras laterales usables
max-width / max-height No crecer por encima Suavizar imágenes enormes o texto ancho
auto Dejar que el navegador calcule El alto por defecto suele seguir el contenido
% Relativo al bloque contenedor % de ancho es común; % de alto necesita alto de padre definido

min-width como suelo

Útil cuando la caja debe seguir usable aunque el layout apriete.

Suelo de ancho mínimo

css
CSS Code 
.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}

max-width como techo

Hábito clásico para texto legible o imágenes que no se estiren sin fin en pantallas grandes.

Techo de ancho máximo

css
CSS Code 
.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}

El alto suele quedarse en auto

En bloques de texto, deja que el alto crezca con el contenido. Un alto fijo muy pequeño puede recortar texto si no planeas overflow (lección posterior).

Alto auto sigue el contenido

css
CSS Code 
.article {
width: 100%;
max-width: 36rem;
height: auto; /* crece con los párrafos */
padding: 1rem;
border: 1px solid #cbd5e1;
}

Pruébalo tú

  1. Panel con width: 320px y padding/borde visibles.
  2. Baldosa 160×120 con ancho y alto.
  3. Hijo con width: 50% dentro de un padre más ancho; redimensiona el padre.
  4. Añade min-width: 12rem a un botón y reduce el viewport.
  5. Bloque de texto con max-width: 40rem y height: auto — luego prueba un alto fijo muy pequeño y nota el riesgo de recorte.

Errores comunes

  • Usar height: 50% sin alto explícito del padre (el porcentaje puede no hacer lo que esperas)
  • Fijar un height corto en una caja de texto y sorprenderte del contenido cortado
  • Olvidar max-width en imágenes grandes o líneas largas
  • Confundir width (tamaño de la caja de contenido) con padding (cojín interior)
  • Asumir que width siempre incluye borde y padding — depende de box-sizing (pronto)

Resumen

  • width y height dimensionan la caja de contenido
  • Usa px para tamaños fijos y % para anchos fluidos relativos al padre
  • min-* y max-* ponen suelo y techo
  • Prefiere height: auto para texto que crece
  • El alto porcentual necesita un padre con alto definido
  • La cuenta completa de la caja llega en las siguientes lecciones del box model

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
9
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial