20-anchura y altura en css

Las propriedades width y height estabelecen en css la anchura y altura de un elemento html

Este elemento tinene un alto de 50px, un ancho de 100%

codigo

 div {
     height: 50px;
     width: 100%;
     border: 1px solid #4CAF50;
   }
    

---

...

Valores de alto y ancho

Se pueden defenir los valores de las seguientes maneras:

• 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 de el bloque contenedor
• initial- Establece la altura/anchura a su valor por defecto
• inherit- El alto/ancho será heredado de su valor padre

Como ves yo puedo decir a un elemento que tenga Widht:300px defenindo el valor real que yo quiero

pero si estamos en documentos onde no sabemos cual es su anchura exacta, los podemos defenir en porcentages

Si quiero ocupar todo el documento escribimos width:100%

Este elemento tiene 200px de alto y 350px de ancho

Codigo

        div{
            width: 350px;
            height: 200px;  
        }
    

---

ancho maximo

Para obtenermos un ancho maximo, usamos la propriedad max-width

Hay ocasiones en que el ancho varia de acordo con el contenido, pero nosotros solo queremos ocupar un ancho concrecto, que no se pase, entonces usamos el ancho maximo max-width

ejemplo

Este elemento tiene una altura de 100 píxeles y un ancho máximo de 500 píxeles.

Codigo

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

Hay que tomar nota que si usas tanto el width como el max-width en el mismo elemento, el max-width va predominar

Quiero decir que si usas un ancho de 500px para un elemento html y sobre ese elemento le pones tambien la propriedad de ancho maximo de 200px, entoces ese elemento solo va a tener 200px

---

Ir al indice

---