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.
Lista de propiedades descritas en este artículo:
| Propiedad | Descripción |
|---|---|
width | Define el ancho de un elemento. |
height | Define el alto de un elemento. |
max-width | Define el ancho máximo de un elemento. |
min-width | Define el ancho mínimo de un elemento. |
max-height | Define el alto máximo de un elemento. |
min-height | Define el alto mínimo de un elemento. |
box-sizing | Controla el cálculo del tamaño de un elemento. |
Anchura y altura
Para cambiar las dimensiones de los elementos HTML se usa básicamente dos propiedades CSS: width para la anchura y height para la altura.
| Propiedad | Descripción |
|---|---|
width | Especifica la anchura de un elemento. |
height | Especifica la altura 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.
Hay que indicar que con la propiedad box-sizing y el valor border-box se puede cambiar el cálculo 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, facilitando mucho el diseño predecible.
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;
}
.rectangulo {
background: salmon;
height: 50px;
width: 100px;
}
Código HTML:
<div class="cuadrado"></div>
<div class="rectangulo"></div>
Resultado:
Dimensiones mínimas y máximas
En el diseño web 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.
Pero todavía es más conveniente que cuando el contenido se adapte a la anchura y altura lo haga 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 | Indica la anchura mínima de un elemento. |
max-width | Indica la anchura máxima de un elemento. |
min-height | Indica la altura mínima de un elemento. |
max-height | Indica la altura máxima 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 responsive.
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
Las propiedades min-width y max-width para definir el ancho mínimo y el ancho máximo de un elemento HTML 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 propiedades min-height y max-height para definir el alto mínimo y el alto máximo de un elemento HTML sobreescriben el valor de la propiedad height. Orden de prioridad de las tres propiedades CSS:
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.
Controlar el cálculo del tamaño
Con la propiedad CSS box-sizing es posible controlar cómo se calcula el tamaño de un elemento. Para ello se tienen en cuenta el contenido, el relleno y los bordes. Los márgenes quedan excluidos de esta propiedad.
Hay dos valores posibles para la propiedad box-sizing:
| Valor | Descripción |
|---|---|
content-box | Solo se considera el tamaño del contenido. Valor por defecto. |
border-box | Se considera el tamaño del contenido, el relleno y el borde. |
Con el valor content-box, el tamaño total de un elemento se calcula a partir de su contenido, sin tener en cuenta el relleno y los bordes. Esto significa que el tamaño de cualquier relleno o borde se sumará después del cálculo, y la caja será más ancha. Por defecto, así es como CSS calcula el tamaño de los elementos.
En cambio, usando el valor border-box, el tamaño de un elemento se calcula incluyendo el ancho y alto del relleno y los bordes; es decir, que la caja absorbe ese tamaño extra. Esto facilita mucho el dimensionado de elementos, ya que el tamaño de un elemento no se amplía a pesar de agregarle bordes a la caja.
Visualicemos un ejemplo. Tenemos una caja ocupando un ancho del 100% del espacio disponible, y le añadimos un borde de 5 píxeles a ambos lados. Por defecto, esta caja tendrá ahora un ancho del 100% + 10 píxeles, desbordando por la derecha de su elemento contenedor. Pero si hacemos uso del valor border-box, el grosor del borde pasará a formar parte del 100%, sin sobresalir.
