Temas de CSS: El Modelo de Caja
La utilización del estándar de marcado CSS (en español Hojas de Estilo en Cascada)
definido por el World Wide Web Consortium (W3C) permite a diseñadores y programadores definir estilos
coherentes para páginas web y aplicar la plantilla a varias páginas. Un aspecto especialmente relevante
de CSS es el Modelo de Caja.
Este artículo brinda una primera aproximación a su arquitectura y a las
distintas posibilidades que ofrece.
Una primera aproximación visual al Modelo de Caja en CSS
Tarde o temprano, todo libro o taller práctico de CSS queda bajo la influencia
del Modelo de Caja.
Es uno de los elementos básicos de las Hojas de
Estilo en Cascada y por lo tanto su correcta interpretación resulta
fundamental a la hora de lograr los resultados deseados en un diseño, por
más simple que éste resulte.
Para entrar en tema, vamos a construir un sencillo ejemplo utilizando un
único elemento <div> al que aplicaremos un estilo. El resultado producido
será analizado con la ayuda de una figura en la que hemos modelado el orden
de apilado de los elementos del <div> en una disposición tridimensional
que nos ayudará a comprenderlo.
Supongamos el siguiente código (lo mostramos fuera de su contexto, restringiéndonos a lo significativo para el ejemplo):
El elemento <div>
<div>
<p>Este es el contenido de nuestra caja.</p>
<p>Este es el contenido de nuestra caja.</p>
<p>Este es el contenido de nuestra caja.</p>
<p>Este es el contenido de nuestra caja.</p>
</div>
El estilo
div {
background-color: #be4061; /*color bordó para el fondo*/
background-image: url('cabeza.jpg');
border: 10px solid #e7a219; /*color naranja para el borde*/
margin: 10px;
padding: 20px;
}
p {
margin: 0 0 20px 0; /*margen inferior de 20 px para el párrafo*/
padding: 0;
}
El código anterior generará una caja como la que muestra la figura siguiente,
en la que adicionalmente se ha dado color a los elementos transparentes
(margen y relleno) solo para hacerlos visibles.
Un detalle interesante que puede apreciarse en la representación tridimensional
en que la capa superior del apilamiento no es el borde, como podría suponerse
intuitivamente.
La capa situada encima de todas las demás es la
de Contenido.
Aunque el caso específico sea materia de otro artículo, comentaremos que
esta disposición fue utilizada por el diseñador Douglas
Bowman de Stopdesign
para el rediseño del sitio de Blogger
, logrando las armoniosas líneas curvas de sus páginas mediante CSS, ubicando
imágenes en la capa de Contenidos de modo que oculten el borde anguloso
de las cajas.
Áreas y propiedades Margin, Padding y Border
Cada caja posee, además de su área de Contenido, otras tres áreas opcionales:
- Área de Margen - Margin
- Área de Relleno - Padding
- Área de Borde - Border
El tamaño de cada área o de sus segmentos está dado por el valor de las respectivas propiedades, definidas en forma global o discriminadas por segmento.
Por ejemplo, la siguiente sentencia asignará un margen homogéneo de 20 píxeles alrededor de la caja:
div { margin: 20px }
Si en cambio se desea asignar valores distintos a cada uno de los segmentos, pueden reflejarse los cuatro valores numéricos siguiendo el orden top - right - bottom - left.El siguiente ejemplo asigna 10 píxeles arriba, 5 a la derecha, 20 abajo y nada a la izquierda:
div { margin: 10px 5px 20px 0 }
Pueden especificarse valores también con la siguiente notación, en la que ya no es necesario mantener el orden:div {
margin-top: 10px ;
margin-right: 5px ;
margin-bottom: 20px ;
}
La lista completa de propiedades es la siguiente:
Propiedades del Margen
"margin-top", "margin-right", "margin-bottom", "margin-left" y "margin"
Propiedades del Relleno
"padding-top", "padding-right", "padding-bottom", "padding-left" y "padding"
Propiedades del Borde
1) Ancho (width)
"border-top-width", "border-right-width", "border-bottom-width", "border-left-width" y "border-width". Pueden ser valores específicos o los valores "thin" (fino), "medium" (medio) y "thick" (grueso)
2) Color (color)
"border-top-color", "border-right-color", "border-bottom-color", "border-left-color" y "border-color"
3) Estilo (style)
"border-top-style", "border-right-style", "border-bottom-style", "border-left-style" and "border-style". Toma una serie de posibles valores, tales como: none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset. Es una propiedad algo conflictiva ya que no todos los navegadores interpretan sus valores de la misma manera.
Como corolario de esta aproximación al modelo de caja resta analizar qué es lo que se verá en cada área cuando la página se muestre en un navegador:
- En el área de Contenido y en la de Relleno se verá aquello que se determine en la propiedad "background" del elemento (un color o una imagen, según el orden de apilado).
- En el área de Borde se verá aquello que se determine en las propiedades del Borde (ancho, color y estilo).
- El área de Margen es siempre transparente.
El Secreto
Hay un solo secreto para comprender cabalmente cada una de las propiedades y su utilización: probar, probar y probar. ;-)Fernando Campaña (Julio de 2006)
Rakidwam Diseño Web
Palabras Clave: diseño web, CSS, Modelo de Caja, margin, padding, border, color