Propiedades CSS Dimensión
Las propiedades de la dimensión CSS le permiten controlar la altura y el ancho de un elemento.
Este elemento tiene una anchura de 100%.
Configuración de la altura y el ancho
Los height y la width propiedades se utilizan para ajustar la altura y el ancho de un elemento.
La height y la width se pueden ajustar en automático (esto es por defecto. Significa que el navegador calcula la altura y anchura), o especificarse en valores de longitud, como px, cm , etc., o en porcentaje (%) del bloque de contención .
Nota: La height y la width las propiedades no incluyen el relleno, las fronteras y los márgenes; que establecen la altura / anchura de la zona interior del relleno, borde, y el margen del elemento!
El siguiente ejemplo muestra un <div> elemento con una altura de 100 píxeles y una anchura de 500 píxeles:
Ajuste de ancho máximo
El max-width propiedad se utiliza para establecer el ancho máximo de un elemento.
El max-width se puede especificar en los valores de longitud, como px, cm , etc., o en porcentaje (%) del bloque de contención, o en Ninguno (esto es por defecto. Significa que no hay ancho máximo).
El problema con el <div> anterior se produce cuando la ventana del navegador es menor que la anchura del elemento (500 píxeles). El navegador entonces agrega una barra de desplazamiento horizontal a la página.
Usando max-width en su lugar, en esta situación, mejorará la manipulación del navegador de pequeñas ventanas.
Consejo: Arrastre la ventana del navegador para menor que 500 píxeles de ancho, para ver la diferencia entre los dos divs!
Nota: El valor del max-width modificaciones de propiedades de width .
El siguiente ejemplo muestra un <div> elemento con una altura de 100 píxeles y un ancho máximo de 500 píxeles:
Inténtelo usted mismo - Ejemplos
Ajuste la altura y la anchura de los elementos
Este ejemplo muestra cómo establecer la altura y la anchura de los diferentes elementos.
Ajuste la altura y la anchura de una imagen usando ciento
Este ejemplo muestra cómo establecer la altura y la anchura de una imagen con un valor por ciento.
Establecer min-width y max-ancho de un elemento
Este ejemplo muestra cómo establecer una anchura mínima y una anchura máxima de un elemento utilizando un valor de píxel.
Conjunto min-max-altura y la altura de un elemento
Este ejemplo muestra cómo establecer una altura mínima y una altura máxima de un elemento utilizando un valor de píxel.
Ponte a prueba con los ejercicios!
Todas las propiedades CSS de dimensiones
| Propiedad | Descripción |
|---|---|
| height | Establece la altura de un elemento |
| max-height | Establece la altura máxima de un elemento |
| max-width | Establece el ancho máximo de un elemento |
| min-height | Establece la altura mínima de un elemento |
| min-width | Establece el ancho mínimo de un elemento |
| width | Establece el ancho de un elemento |