Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (XXI)

10.18. Cálculo de la anchura y altura

Como ya hemos visto los atributos width y height definen la anchura y altura de los elementos HTML, se utilizan mucho para definir el diseño de la página, sobre todo en los elementos contenedores, (div, p, etc.) Es importante tener en cuenta a qué se refieren estos valores, ya que en ocasiones se comete el error de creer que incluyen partes que no incluyen en realidad.

Los atributos width y height definen la anchura y altura de los elementos HTML, pero sólo incluyen el contenido de la etiqueta, no incluyen el padding, ni el margin, ni el border.

Vamos a explicar el caso de width con el siguiente esquema (el height sería similar):

 

El esquema corresponde a la definición de un contenedor (por ejemplo div) con estos atributos:

div { width: 200px; border-width: 5px; padding: 20px; margin: 100px } 

Por defecto (sin definir el box-sizing) deberemos reservar un espacio en nuestro diseño de la página de 450 px., ya que al width del contenido hay que sumar el padding y el border, y luego añadir el margin. Es decir, 200 px, que ocupa el contenido, más 100 px, por cada lado del margin; otros 5 px. por cada lado del border; otros 20 px. por cada lado del padding.

Esta forma de calcular el ancho del modelo de caja no es la más intuitiva, y ha provocado numerosos errores en el diseño, en unos casos por su complejidad y en otros casos por desconocimiento sobre cómo se calcula la anchura.

Afortunadamente existe la propiedad box-sizing que vamos a ver a continuación.