Alto y ancho de CSS
El CSS heighty widthlas propiedades se utilizan para establecer la altura y el ancho de un elemento.
La propiedad CSS max-widthse utiliza para establecer el ancho máximo de un elemento.
CSS Configuración de alto y ancho
Las propiedades heighty widthse utilizan para establecer la altura y el ancho de un elemento.
Las propiedades de alto y ancho no incluyen relleno, bordes ni márgenes. Establece el alto/ancho del área dentro del relleno, el borde y el margen del elemento.
Valores de alto y ancho de CSS
Las propiedades heighty widthpueden tener los siguientes valores:
auto- Esto es predeterminado. El navegador calcula la altura y la anchura.length- Define el alto/ancho en px, cm, etc.%- Define el alto/ancho en porcentaje del bloque contenedorinitial- Establece el alto/ancho a su valor predeterminadoinherit- El alto/ancho se heredará de su valor principal
Ejemplos de alto y ancho de CSS
Ejemplo
Establezca la altura y el ancho de un elemento <div>:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Ejemplo
Establezca la altura y el ancho de otro elemento <div>:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Nota: ¡Recuerde que las propiedades heighty widthno incluyen relleno, bordes ni márgenes! ¡Establecen el alto/ancho del área dentro del relleno, el borde y el margen del elemento!
Configuración de ancho máximo
La max-widthpropiedad se utiliza para establecer el ancho máximo de un elemento.
Se max-widthpuede especificar en valores de longitud , como px, cm, etc., o en porcentaje (%) del bloque contenedor, o establecerse en ninguno (esto es predeterminado. Significa que no hay un ancho máximo).
El problema con lo <div>anterior ocurre cuando la ventana del navegador es más pequeña que el ancho del elemento (500px). Luego, el navegador agrega una barra de desplazamiento horizontal a la página.
Usar max-widthen su lugar, en esta situación, mejorará el manejo de las ventanas pequeñas por parte del navegador.
Sugerencia: arrastre la ventana del navegador a un ancho inferior a 500 px para ver la diferencia entre los dos divs.
Nota: si por alguna razón usa tanto la
widthpropiedad como la
max-widthpropiedad en el mismo elemento, y el valor de la
widthpropiedad es mayor que la
max-widthpropiedad; max-widthse usará la propiedad (y se ignorará la
propiedad
width).
Ejemplo
Este elemento <div> tiene una altura de 100 píxeles y un ancho máximo de 500 píxeles:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
Pruébelo usted mismo - Ejemplos
Este ejemplo demuestra cómo establecer la altura y el ancho de diferentes elementos.
Este ejemplo demuestra cómo establecer el alto y el ancho de una imagen usando un valor de porcentaje.
Este ejemplo demuestra cómo establecer un ancho mínimo y un ancho máximo de un elemento utilizando un valor de píxel.
Este ejemplo demuestra cómo establecer una altura mínima y una altura máxima de un elemento utilizando un valor de píxel.
Todas las propiedades de dimensión de CSS
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |