Dimensiones de Ancho y Alto CSS

Configurando el Ancho y Alto

Las propiedades de width y height son utilizadas para establecer el ancho y alto de un elemento. El width y height pueden establecerse en auto (esto es por defecto, lo que quiere decir que el navegador calculara al ancho y alto), o se especifica en valores de dimensión como px, cm, etc., o en porcentaje (%) del bloque que lo contiene.

Nota: Las propiedades width y height no incluye el espaciado, bordes o márgenes; estos se establecen en las respectivas áreas de el padding, border and margin de el elemento.

El siguiente ejemplo muestra un elemento <div> con un ancho de 200 pixeles y un alto de 90 pixeles:

div {
  width: 200px;
  height: 90px;
  border: 3px solid #73AD21;
}

Estableciendo el max-width

La propiedad max-width es usada para especificar la anchura máxima de un elemento. max-width puede ser especificado en valores de dimensión como px, cm, etc., o en porcentajes (%) del bloque de contenido, o establecer nada con none (Este es el valor predeterminado, y establece que no hay un ancho máximo). Cuando la ventana del navegador web es menor que el ancho del elemento, el navegador agregará una barra de desplazamiento horizontal para la página. Podemos usar max-height para que al ancho sea manipulado por el navegador en ventanas pequeñas.

Nota: el valor de la propiedad max-width se sobrepone al valor de width.

 En el siguiente ejemplo mostramos un elemento <div> con una altura (width) de 100 pixeles y máximo (max-height) de 500 pixeles:

div {
  max-width: 500px;
  height: 100px;
  border: 1px solid #999;
}