CSS Min y Max
Las propiedades min y max limitan el tamaño de los elementos. Garantizan que un elemento no sea demasiado pequeño ni demasiado grande, incluso si cambia el tamaño del contenedor padre.
Propiedades disponibles
Las configuraciones min-width, max-width, min-height y max-height permiten un ajuste fino del diseño. Se usan con frecuencia en la creación de diseños responsivos.
| Propiedad | Descripción |
|---|---|
| min-width | Define el ancho mínimo por debajo del cual el elemento no puede reducirse. |
| max-width | Define el ancho máximo por encima del cual el elemento no puede crecer. |
| min-height | Define la altura mínima por debajo de la cual el elemento no puede reducirse. |
| max-height | Define la altura máxima por encima de la cual el elemento no puede crecer. |
Ejemplo con restricciones fijas
En el siguiente ejemplo, la caja tiene un ancho y una altura mínimos y máximos definidos.
La caja roja puede tener un ancho entre 200 y 400 píxeles, y una altura entre 100 y 200 píxeles.
Uso responsivo
Los valores min y max combinados con anchos porcentuales son excelentes para crear diseños responsivos.
Consejos para usar min y max
Las propiedades min y max ayudan a evitar que los elementos se reduzcan o estiren de forma extrema.
- Usa min-width en móviles para evitar que el texto se divida en columnas demasiado estrechas.
- Max-width ayuda a mantener el contenido legible incluso en pantallas grandes.
- Combina valores min y max con anchos porcentuales para lograr un diseño perfectamente responsivo.
✨ 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.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.