CSS: El modelo de caja (Box model)

Existe un conjunto de características que determinan la posición y distribución de un elemento dentro de una página web. Todas estas características se pueden traducir a propiedades CSS, y conocerlas es muy importante para manipular la presentación de una página.

En HTML, todo elemento visible en la página es considerado una caja. Un elemento div es una caja; un párrafo es una caja, un enlace, una tabla, cada fila y celda de ésta, hasta la más mísera etiqueta span de nuestra página es una caja.

Esto tiene un propósito muy importante…

… eh… no… no es eso. El modelo de caja (box model) en HTML define las propiedades que determinarán las dimensiones y posición de cada elemento.

Si vemos la página HTML como un árbol, donde cada etiqueta es un nodo, podemos decir que cada nodo dentro de body es una caja. El texto suelto no se considera un elemento, así que tampoco se puede considerar caja.

El modelo de caja en CSS

Como mencioné al principio, cada elemento tiene ciertas características que definen sus dimensiones:

• width y height definen la anchura del espacio para el contenido de un elemento
• padding es el espacio entre los límites del elemento y su contenido
• border es el estilo del borde, que sale de los límites del elemento
• margin es el espacio entre el elemento y los elementos contiguos

Todas estas propiedades son manipulables desde CSS. En el caso de width, height, padding y margin, se pueden definir sus tamaños, mientras que para border, se puede definir además de su grosor, su estilo y color.

• border
• border-bottom
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-color
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-style
• border-top-width
• border-width
• height
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• width

Las 20 formas de definir el borde son las combinaciones de sus tres características (color, estilo y grosor). En casos como border, border-right, border-top, border-bottom y border-left se pueden poner una, dos o las tres propiedades, en cualquier orden y separadas por espacio.

p{border:solid 1px blue}
div{border-left:1.5em #325435 dashed}

En las propiedades que definen anchura de la separación, tanto en border-width, margin y padding, se pueden asignar los valores de distintas formas:

• Los cuatro lados con un mismo valor.

  margin:10px

• Un valor para arriba y abajo, y otro valor para los lados.

  padding:2em 10%

• Un valor para arriba, otro para los lados y otro para abajo.

  border-width:15px 3px 1em

• Un valor para los cuatro lados en el orden arriba, derecha, abajo, izquierda.

  padding:10px 1.2em 20px 5%

Las unidades de medida que se pueden usar son las mismas para todos: px, pt, em, %, in, cm. En el caso de margin, se puede indicar el valor auto en uno de los lados (o ambos) para que el margen se separe automáticamente. Es muy útil para ajustar la alineación de un elemento.

La propiedad display

Esta propiedad CSS se utiliza para definir la forma en que se mostrará la página. No es parte de las características del modelo de caja, pero su valor afecta a las otras propiedades:

• block: Los elementos con este valor se separan de sus elementos contiguos con un salto de línea, además de que su contenido abarca automáticamente la anchura (width) de su contenedor.
  Si se les da valor a las propiedades padding, border y margin, la propiedad width seguirá ajustándose automáticamente. Pero si le damos un valor fijo a esta propiedad, el espacio total que abarca será el de width+padding+border+margin. Si el elemento tiene width:100% y le definimos alguna otra propiedad del modelo de caja, el elemento se saldrá de su contenedor, desfazando la imagen de la página.
• inline: Esta propiedad hace que un elemento aparezca en línea con el resto del texto. Las propiedades del modelo de caja sí aplican a estos elementos, pero de una forma extraña: Si definimos estas propiedades hacia arriba o hacia abajo (padding-top, border-bottom, margin-top, etc.), los estilos sí aplicarán, pero sin separar al elemento del texto superior e inferior, como lo podemos ver en este ejemplo. El ejemplo también tiene una altura y anchura definidas, pero un elemento inline no aplica estos estilos.
• inline-block: Es la combinación entre block e inline-block (duh!), haciendo que el elemento aparezca en línea con el texto, pero que sus propiedades del modelo de caja lo separen de sus elementos contiguos. Si tomamos el ejemplo anterior con este valor, sería así. Como podemos ver, el resto del párrafo se separa por las propiedades padding, border y margin. Ahora sí podemos ver la altura y anchura que se definió al elemento. Cabe mencionar que versiones de IE inferiores a las 8 no soportan este valor.

Hay otros valores para display, donde afecta de formas muy distintas al modelo de caja. Por ejemplo, con el valor table, podemos definir una anchura, pero al darle borde, éste se aplicará hacia adentro del elemento, no hacia afuera, mientras el margen se aplica hacia afuera y el padding simplemente no se aplica. En caso de table-cell es lo mismo con border, pero padding sí se aplica y margin es el que no. Hay más, pero los que normalmente se usan son los primeros tres que mencioné, el resto sería para casos especiales, y tendríamos que revisar cómo se ve afectado el modelo de caja con cada una.

Es muy recomendable revisar en distintos navegadores (y distintas versiones, sobre todo en IE) cómo se despliega el contenido con los cambios en las propiedades del modelo de caja. También les recomiendo aprender a usar las herramientas de inspeción del contenido que tiene cada navegador (IE developer tools, Webkit inspector, Firebug o Firefox Inspector, Opera Dragonfly) y hacer pruebas con estas propiedades.

Actualización

Hasta la versión 7 de Internet Explorer, el modelo de caja era diferente, incorrecto si lo comparamos con el del W3C: la anchura del elemento (width) consideraba tanto el contenido como las propiedades padding y border del elemento. Hay autores a favor de este error (o diferencia, si así prefieren verlo), y este debate derivó en crear una propiedad de CSS (oficial desde la versión 3) llamada box-sizing, la cual acepta dos valores, además de inherit: content-box para mantener el estándar de la W3C y border-box para aplicar el modelado como lo hace IE7.

Anchura predeterminada del estándar

Esta propiedad es válida para todos los navegadores modernos, incluyendo IE8