CSS Ancho y Alto
Las propiedades width y height definen el ancho y alto de un elemento. Estos valores influyen en el diseño y la adaptabilidad.
Propiedades básicas
Para controlar ancho y alto se usan width, height, min-width, max-width, min-height y max-height. Permiten asignar tamaños fijos o flexibles.
| Propiedad | Descripción |
|---|---|
| width | Define el ancho del elemento. |
| height | Define el alto del elemento. |
| min-width / max-width | Establece el ancho mínimo y máximo del elemento. |
| min-height / max-height | Establece el alto mínimo y máximo del elemento. |
Tamaños fijos y flexibles
En este ejemplo se muestra cómo asignar un tamaño fijo y cómo usar valores mínimos y máximos.
La primera caja mide 200px de ancho y 100px de alto. La segunda es flexible: al menos 150px y como máximo 300px de ancho.
Tamaños en porcentaje
El ancho también se puede definir en porcentaje, ajustándose al ancho del elemento padre.
Tamaños basados en viewport
En CSS, con las unidades de viewport (vw, vh) se ajusta el tamaño de los elementos a la anchura y altura de la pantalla. Por ejemplo, 100vw siempre ocupa todo el ancho de la ventana.
En este ejemplo, la caja ocupa todo el ancho de la pantalla y la mitad de su altura.
Diseños dinámicos y fluidos
Con las funciones min(), max() y clamp() se controla de forma más flexible el tamaño de los elementos, combinando dimensiones mínimas, máximas e ideales.
Este código crea una caja que se mantiene entre 200px y 600px de ancho, pero idealmente ocupa el 50%.
Consejos para usar width y height
Un dimensionamiento adecuado es clave en el diseño responsivo.
- Usa porcentajes o unidades de viewport para diseños adaptativos.
- Los valores min y max ayudan a evitar que los elementos se encojan o crezcan demasiado.
- Evita usar demasiados tamaños fijos, ya que pueden afectar la vista en móviles.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
