Width

Permite definir el ancho de un elemento. Podemos asignarle un valor en pixels, centímetros o un porcentaje del ancho del elemento que lo contiene.

Para descripción poner un ancho de 300px.

Height

Permite definir la altura de un elemento. Podemos asignarle un valor en pixels, centímetros o un porcentaje del ancho del elemento que lo contiene.

Para descripción poner un ancho de 175px. Si la altura es mayor que el contenido se crea un espacio vacío. Si la altura es menor que el contenido, éste puede sobresalir.

Min-width

Permite definir el ancho mínimo de un elemento. Podemos asignarle un valor en pixels, centímetros o un porcentaje del ancho del elemento que lo contiene.

Para descripción quitar width y poner min-width: 300px;

Probar con otro valor menor.

Min-height

Permite definir la altura mínima de un elemento. Podemos asignarle un valor en pixels, centímetros o un porcentaje del ancho del elemento que lo contiene.

Para descripción quitar quitar height y poner min-height: 150px;

Max-width

Permite definir el ancho máximo de un elemento. Podemos asignarle un valor en pixels, centímetros o un porcentaje del ancho del elemento que lo contiene.

Para descripción poner max-width: 300px;

Probar con valores menores y mayores.

Max-height

Permite definir la altura máxima de un elemento. Podemos asignarle un valor en pixels, centímetros o un porcentaje del ancho del elemento que lo contiene.

Poner en descripción max-height: 50px;

Resize

Permite especificar que un elemento pueda ser redimensionado por el usuario.

Valores:

  • both: el usuario puede redimensionar el elemento tanto en altura como en anchura.
  • horizontal: el usuario puede redimensionar el ancho del elemento.
  • vertical: el usuario puede redimensionar la altura del elemento.

Es necesario, para que la propiedad sea efectiva, que el elemento tenga definida la propiedad overflow con un valor por ejemplo de auto.

En descripción poner:

padding: 10px;

width: 250px;

overflow: auto;

resize: both;

En la esquina inferior derecha del recuadro hay unas pequeñas líneas. Si hacemos clic en ellas y arrastramos, conseguiremos modificar el tamaño del elemento.