Los navegadores web determinan las dimensiones de los elementos HTML para representarlos al usuario. Por defecto, si un elemento HTML no tiene configurados un ancho y un alto de forma específica, los navegadores determinan el tamaño de forma automática a partir del contenido.
En este sentido, si el elemento en cuestión es un elemento de bloque, ocupará el 100% del ancho de la línea, hasta los límites de la caja del elemento contenedor superior (padre). En cambio, si se trata de un elemento de línea, ocupará el ancho del contenido, ya sea un enlace, una imagen o una cita.
La tipología del elemento se puede cambiar con la propiedad display.
Para cambiar las dimensiones de los elementos HTML se usan dos propiedades: una para la anchura (width) y otra para la altura (height).
| Propiedad | Descripción |
|---|---|
width | Define el ancho de un elemento. |
height | Define el alto de un elemento. |
Estas dos propiedades se aplican sobre la región que ocupa el contenido, por lo que no se tiene en cuenta el grosor extra derivado del relleno, bordes y márgenes. El tamaño real (definitivo) de la caja será la suma de todos ellos.
Con la propiedad box-sizing y el valor border-box se puede cambiar el comportamiento de width y height. En este caso, las dimensiones especificadas no se aplican sobre el contenido sino que se aplican hasta la cara exterior del borde. Es una propiedad de gran utilidad.
Por defecto, los valores de width y height es auto (automático). Cuando es así, el navegador calcula las medidas de la caja tomando como referencia la región del contenido del elemento y su tipología.
Valores de width y height:
| Valor | Descripción |
|---|---|
auto | Valor por defecto calculado por el navegador. |
inherit | Hereda el ancho y alto del elemento padre. |
initial | Coloca su valor por defecto, heredado o no. |
| Longitud | Valor de longitud (cm, px, em, etc). |
| Porcentaje | Valor en porcentaje (%). |
Vamos a ver algunos ejemplos de código CSS modificando la anchura y la altura de un elemento de bloque muy utilizado: <div>. Para definir un cuadrado de 50×50 píxeles, especificamos 50px a cada una de las dos propiedades.
Ejemplo de código CSS indicando ancho y alto:
.cuadrado {
background: Teal;
height: 50px;
width: 50px;
}
.rectangular {
background: Salmon;
height: 50px;
width: 100px;
}
Código HTML:
<div class="cuadrado"></div>
<div class="rectangular"></div>
Resultado:
Dimensiones mínimas y máximas
En diseño web adaptativo (responsive), el uso de dimensiones fijas puede ser un inconveniente. Hoy en día existe una gran variedad de dispositivos, por lo que hay distintos tamaños de pantalla. Esto hace muy conveniente que el contenido pueda adaptarse a la anchura y altura del navegador web.
Más conveniente es aún que el contenido se adapte a la anchura y altura del navegador, pero respetando ciertos límites. Es decir, que la anchura del elemento en cuestión no sea tan estrecha como para que no quepa un contenido determinado, ni tan ancha como para que se visualice de forma parcial.
Por ejemplo, si se especifica un tamaño de elemento más pequeño que el contenido, este quedará parcialmente fuera de la caja. En el siguiente ejemplo creamos una caja más pequeña que el contenido:
.cjout {
border: 1px dotted #ff7f2a;
padding: 5px;
height: 50px;
width: 50px;
}
Resultado:
El texto se sale
Tal y como se puede ver, se especifica una caja de 50×50 píxeles. Debido al relleno y los bordes, el tamaño definitivo de la caja acaba siendo de 62×62 píxeles. El contenido debe ajustarse dentro de los 50×50 píxeles, pero al ser demasiado largo se desborda hacia fuera por la parte inferior.
En el nivel 2 de CSS se publicaron cuatro propiedades que permiten establecer unos valores mínimos y máximos para definir el ancho y alto de cualquier elemento HTML de una página web. Son las siguientes propiedades:
| Propiedad | Descripción |
|---|---|
min-width | Define el ancho mínimo de un elemento. |
max-width | Define el ancho máximo de un elemento. |
min-height | Define el alto mínimo de un elemento. |
max-height | Define el alto máximo de un elemento. |
Con ayuda de estas propiedades CSS es posible establecer un rango de anchuras y alturas. Especificar unos mínimos y unos máximos puede ser muy útil en varios escenarios de diseño adaptativo.
Los valores de estas cuatro propiedades pueden ser:
| Propiedad | Descripción |
|---|---|
| Longitud | Valor de longitud (cm, px, em, etc). |
| Porcentaje | Valor en porcentaje (%). |
none | Sin límites en el tamaño de la caja. |
inherit | Hereda el valor del elemento padre. |
Anchuras mínimas y máximas
Para definir el ancho mínimo de un elemento HTML se usa la propiedad min-width, y para el ancho máximo se usa max-width. Estas dos propiedades sobreescriben el valor de la propiedad width. A continuación se detalla el orden de prioridad de estas tres propiedades CSS:
max-widthsobreescribe el valor dewidthmin-widthsobreescribe el valor demax-width
Un elemento HTML no puede ser más ancho que el valor indicado en la propiedad max-width, incluso hasta cuando el valor de width sea mayor. Por ejemplo, si una caja tiene un ancho de 300 píxeles, pero su ancho máximo está establecido en 200 píxeles, medirá un ancho de 200 píxeles.
¿Y qué ocurriría si la propiedad min-width tuviera un valor mayor que max-width? En este caso, el ancho mínimo tiene prioridad. Por ejemplo, si una caja tiene un ancho máximo de 200 píxeles y un ancho mínimo de 300 píxeles, entonces la caja medirá 300 píxeles.
Alturas mínimas y máximas
Las alturas mínimas y máximas de un elemento HTML se definen mediante las propiedades min-height y max-height, respectivamente. Estas propiedades sobreescriben el valor de height. Orden de prioridad:
max-heightsobreescribe el valor deheightmin-heightsobreescribe el valor demax-height
La lógica es muy similar a la que hemos visto con las anchuras mínimas y máximas: un elemento HTML no puede tener más altura que el valor especificado mediante max-height, incluso hasta cuando height indique un valor mayor. Y si fuera el caso de que la propiedad min-height definiera una altura mayor que la propiedad max-height, el alto mínimo tendría preferencia.
