Width/Height en CSS

Las propiedades (height), (width) y (max-width) en CCS establecen la altura, ancho y ancho máximo de un elemento.

Introducción

Las propiedades de height, width y max-width son fundamentales para el diseño de páginas web responsivas y bien estructuradas. Controlar las dimensiones de los elementos te permite crear interfaces de usuario que no solo son visualmente atractivas, sino también funcionales en diferentes dispositivos. Es importante experimentar con estos valores y comprender cómo afectan al comportamiento de tus elementos dentro de la página. Al dominar estas propiedades, tendrás una base sólida para crear diseños web efectivos y adaptables.

Ejemplo 1

Crea un <div> que tenga una anchura del 50% de su contenedor padre y una altura de 150 píxeles. Cambia el color de fondo para que sea visible.

Resultado:

🟡🔴🔵
DEV

Ejemplo 2

Diseña una tarjeta que tenga una anchura fija de 300 píxeles, pero con una anchura máxima del 100% para que pueda adaptarse a pantallas más pequeñas. Dale un fondo y un borde para que resalte.

Resultado:

Ejemplo 3

Haz una imagen que ocupe el 80% del contenedor padre, pero que nunca exceda los 400 píxeles de anchura. Asegúrate de que la altura se ajuste proporcionalmente.

Resultado:

Seguir aprendiendo