Altura y anchura de CSS

El ancho de este elemento es del 100 por ciento.

CSS establece altura y ancho

height y width La propiedad se utiliza para establecer la altura y el ancho del elemento.

Las propiedades height y width no incluyen relleno, borde o márgenes. ¡Establecen la altura y el ancho del área dentro del relleno, borde y márgenes del elemento!

Valores de altura y ancho en CSS

height y width La propiedad puede establecer los siguientes valores:

  • auto - Predeterminado. El navegador calcula la altura y el ancho.
  • length - Define la altura y el ancho en valores de longitud (por ejemplo, px, cm, etc.).
  • % - Define la altura y el ancho en porcentajes del contenedor.
  • initial - Establece la altura y el ancho en el valor predeterminado.
  • inherit - Hereda la altura y el ancho del valor del padre.

Ejemplo de altura y ancho en CSS

La altura de este elemento es de 200 píxeles y el ancho es del 50%

Ejemplo

Establecer la altura y el ancho de un elemento <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Prueba por ti mismo

La altura de este elemento es de 100 píxeles y el ancho es de 500 píxeles.

Ejemplo

Establecer la altura y el ancho de otro elemento <div>:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Prueba por ti mismo

Notas:Recuerda:height y width La propiedad no incluye relleno, borde o márgenes. ¡Establece la altura y el ancho del área dentro del relleno, borde y márgenes del elemento!

Establecer max-width

max-width La propiedad se utiliza para establecer el ancho máximo del elemento.

Se puede especificar max-width (ancho máximo) utilizando valores de longitud (por ejemplo, px, cm, etc.) o porcentajes del contenedor (％), o se puede establecer en none (valor predeterminado. Significa que no hay ancho máximo).

Cuando la ventana del navegador es más pequeña que el ancho del elemento (500px), ocurre lo siguiente: <div> problemas. Luego, el navegador agregará una barra de desplazamiento horizontal a la página.

En este caso, se utiliza max-width Puede mejorar la forma en que el navegador maneja las ventanas pequeñas.

Consejo:Arrastra la ventana del navegador a un ancho menor de 500px para ver la diferencia entre los dos div!

La altura de este elemento es de 100 píxeles y el ancho máximo es de 500 píxeles.

La altura de este elemento es de 100 píxeles y el ancho máximo es de 500 píxeles.

Notas:max-width El valor de la propiedad reemplazará width(Ancho).

Ejemplo

La altura de este elemento <div> es de 100 píxeles, y el ancho máximo es de 500 píxeles:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Prueba por ti mismo

Más ejemplos

Establecer la altura y el ancho del elemento
Este ejemplo muestra cómo establecer la altura y el ancho de diferentes elementos.
Establecer la altura y el ancho de la imagen utilizando porcentajes
Este ejemplo muestra cómo establecer la altura y el ancho de una imagen utilizando porcentajes.
Establecer el ancho mínimo y máximo del elemento
Este ejemplo muestra cómo establecer el ancho mínimo y máximo de un elemento utilizando valores de píxeles.
Establecer la altura mínima y máxima del elemento
Este ejemplo muestra cómo usar valores de píxeles para establecer la altura mínima y máxima del elemento.

Establecer atributos de tamaño CSS

Atributo Descripción
height Establecer la altura del elemento.
max-height Establecer la altura máxima del elemento.
max-width Establecer el ancho máximo del elemento.
min-height Establecer la altura mínima del elemento.
min-width Establecer el ancho mínimo del elemento.
width Establecer el ancho del elemento.