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

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

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

Cada ?rea, a su vez, puede dividirse en cuatro segmentos seg?n su posici?n: izquierdo (left), derecho (right), superior (top) e inferior (bottom).

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 ;
}

En cualquier caso puede obviarse el valor 0 ya que es el valor que toman las propiedades por defecto. La lista completa de propiedades es la siguiente:

Propiedades del Margen

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin

Propiedades del Relleno

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding

Propiedades del Borde

• Ancho (width): border-top-width, border-right-width, border-bottom-width, border-left-width, border-width. Pueden ser valores espec?ficos o los valores "thin" (fino), "medium" (medio) y "thick" (grueso)
• Color (color): border-top-color, border-right-color, border-bottom-color, border-left-color, border-color.
• Estilo (style): border-top-style, border-right-style, border-bottom-style, border-left-style, 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.