Dimensiones

<< Modelo de cajas Border >>

Si queremos darle un tamaño específico a los distintos elementos de un documento HTML utilizaremos las propiedades ancho(width) y alto(height). Los valores serán a elección del programador con las medidas normalmente de porcentajes o píxeles. En el caso de darle el valor auto, estamos indicándole al navegador que sea él quien le de el tamaño apropiado dependiendo de su contenido (valor por defecto). Si le damos el valor de max-content usa el tamaño que necesita la caja para representar todo su contenido, si le damos el valor de min-content la palabra más larga define el tamaño del cuadro y si le damos fix-content el valor será min(max-content, max(min-content, <longitud-porcentaje>))

p{
    border: 1px solid red;
    width: max-content;
}

¡OJO! Cuando estamos asignando un alto/ancho a un elemento, ese tamaño no incluye el tamaño que pueda tener su borde o padding, el tamaño total del elemento será la suma de todos ellos.

Además de estos valores, tenemos la posibilidad de indicarle un máximo/mínimo con las propiedades: min-width, max-width, min-height, max-height. De modo que en lugar de darle un tamaño fijo establecemos unos rangos donde el ancho/alto podría variar entre esos valores. Es importante tener en cuenta que los mínimos(min-width, min-height) por defecto tienen un valor de 0, mientras que los máximos(max-width, max-height) tienen el valor none.

Si por error le damos al ancho(width) o alto(height) un valor superior que su máximo, el tamaño será entre el mínimo y el máximo.

p {
     width: 100px;
     height: 200px;
     background-color: pink;
     max-width: 80px;
}

El ancho será entre 0 (valor por defecto) y el 80px.

<< Modelo de cajas Border >>