Altura y anchura en CSS

En este artículo revisaremos cómo podemos configurar los valores de la altura y anchura en CSS.

Altura y anchura

Hasta ahora hemos visto cómo jugar con los márgenes, paddings, bordes en un modelo de caja en CSS. Ahora vamos a jugar con las dimensiones.

Vamos a ver un ejemplo de una caja con 200px de ancho y otra de 400px.

Esta caja tiene 200px de ancho.

Esta caja tiene 400px de ancho.

También podemos darle un valor con %

Esta caja tiene 50% de ancho.

Esta caja tiene 80% de ancho.

Cuando el valor es un % el valor de 100% es el valor de la caja superior a donde se encuentra nuestro elemento.

Ahora vamos a darle valores de altura a una caja.

Esta caja tiene 200px de alto.

Esta caja tiene 300px de alto.

Fíjense que si no colocamos un valor al width el valor predefinido será 100%.

Ahora un ejemplo con width y heigth al mismo tiempo.

Esta caja tiene un ancho de 50% y una altura de 150px.

La propiedad max-width se usa para establecer el ancho máximo de un elemento. Max-width nos mejora la navegación en pantallas pequeñas. Cuando creamos una caja con un width menor al tamaño de la pantalla el navegador nos creará una barra de navegación horizontal para que la caja mantenga su tamaño. Si usamos max-width la achura de la caja va a modificarse al tamaño del navegador hasta un el valor que le asignemos como ancho máximo.

Lo veremos más claro con un ejemplo.

Esta caja tiene un ancho de 500px y una altura de 100px.

y ahora

Esta caja tiene un ancho máximo de 500px y una altura de 100px.

Si puedes, modifica el tamaño de la ventana de tu navegador para que veas que pasa con los dos cajas. La primera caja se queda de igual tamaño, pero la segunda se adapta al tamaño de la ventana del navegador.

El ancho máximo se puede especificar en valores de longitud, como px, cm, etc., o en porcentaje (%) del bloque contenedor, o establecer en ninguno (esto es por defecto. Significa que no hay ancho máximo).

 

Así como tenemos el max-width tenemos:

  • La propiedad max-height se usa para establecer la altura máxima que puede tener un cuadro.
  • La propiedad min-height se utiliza para establecer la altura mínima que puede tener una caja.
  • La propiedad max-width se utiliza para establecer el ancho máximo que puede tener un cuadro.
  • La propiedad min-width se usa para establecer el ancho mínimo que puede tener un recuadro.

Estas propiedades nos ayudan a tener un diseño más limpio y que ayude que el contenido sea de más fácil lectura al visitante.

Revisa que otras propiedades puedes manipular para mejorar tu diseño. Aquí te dejo algunos artículos que he escrito de propiedades que puedes manipular: colores, fondos, fuentes, textos, bordes, márgenes, padding.

Te gustó el post? Espero tus comentarios aquí abajo.

 

Deja un comentario