Cajas: márgenes, rellenos y bordes

Introducción

Cuando una aplicación del usuario (entiéndase navegador o browser) procesa el contenido de un documento, lo hace siguiendo un modelo determinado. En el modelo de formato visual de las CSS, cada elemento de la página genera una o más cajas rectangulares de acuerdo también a un modelo de caja.

El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos. El elemento raíz del documento (<HTML> o, mejor aún, <BODY> en HTML) genera una caja que actúa como bloque de contención de las cajas generadas subsecuentemente. A su vez, cada caja puede actuar como bloque de contención de otras cajas generadas por sus elementos descendientes.

Todo esto es muy técnico, pero ¿para qué sirve? Fundamentalmente para tener el control no solo de las propiedades del elemento en sí (su color, la fuente usada para el texto, etc.), sino también de las propiedades de esa caja generada por el elemento (sus márgenes, sus bordes, la posición dentro del documento) que será lo que nos permita componer visualmente la página de un modo mucho más rico y flexible que con HTML.

Este modelo de caja es el que permite, por ejemplo, que cualquier elementos de la página pueda recibir todas de las propiedades definidas en CSS. Por eso, a diferencia de lo que sucede con HTML, todos los elementos pueden tener una imagen de fondo o un borde (sin necesidad de usar una tabla para eso); también es posible darle una ubicación precisa a cualquier elemento dentro de la página, ya sea con respecto a la pantalla o a otros elementos. Mejor aún, nos da la posibilidad de usar un lenguaje como JavaScript para conseguir efectos muy interesantes modificando las propiedades de las cajas (moverlas de su posición, mostrarlas o esconderlas, cambiar su tamaño, etc.).

Bien, luego de tantos rodeos espero haberlos convencido de que no abandonen esta página y continúen con el tema, que bien se lo merece.

Cada caja tiene un área de contenido (por ejemplo, texto, una imagen, etc.) y las áreas circundantes opcionales de padding (relleno), border (borde) y margin (margen).

En esta sección veremos cómo se especifican las propiedades para cada una de estas áreas:

Las áreas de padding, border y margin se dividen en cuatro segmentos: top (superior), bottom (inferior), left (izquierdo) y right (derecho). De este modo podemos distinguir border-left, border-right, border-top y border-bottom (lo mismo para padding y margin).

El estilo del fondo de las distintas áreas de una caja es determinado del siguiente modo:

Area del contenido:: La propiedad 'background' del elemento
Area del relleno (padding):: La propiedad 'background' del elemento
Area del borde (border):: Las propiedades del borde del elemento
Area del margen (margin):: Los márgenes son siempre transparentes

Volver

Propiedades del margen

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Valores:	<ancho-del-margen> \| inherit
Valor inicial:	0
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	se refieren al ancho del bloque de contención

Estas propiedades determinan los márgenes superior, derecho, inferior e izquierdo de una caja.

<ancho-del-margen> puede tomar uno de los siguientes valores:

medida: Especifica un ancho fijo
porcentaje: El porcentaje es calculado con respecto al ancho del bloque de contención
auto: El valor es determinado por el navegador

Se pueden usar valores negativos (por ejemplo, margin-top: -8px).

'margin'
Valores:	<ancho-del-margen>{1,4} \| inherit
Valor inicial:	no definido para las propiedades resumidas
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	se refieren al ancho del bloque de contención

La propiedad 'margin' es una propiedad resumida que se utiliza para definir los cuatro márgenes a la vez. Los signos {1,4} significan que pueden especificarse de 1 a 4 valores para <ancho-del-margen>:

Si hay sólo un valor: se aplica a todos los lados
Si hay dos valores: los márgenes superior e inferior son determinados por el primer valor y los márgenes derecho e izquierdo son determinados por el segundo
Si hay tres valores: el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior es definido por el tercero
Si hay cuatro valores: se aplican al margen superior, derecho, inferior e izquierdo, respectivamente.

Ver ejemplos

Volver

Propiedades del relleno

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Valores:	<ancho-del-relleno> \| inherit
Valor inicial:	0
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	se refieren al ancho del bloque de contención

Estas propiedades determinan el relleno superior, derecho, inferior e izquierdo de una caja.

<ancho-del-relleno> puede tomar uno de los siguientes valores:

medida: Especifica un ancho fijo
porcentaje: El porcentaje es calculado con respecto al ancho del bloque de contención (aún para 'padding-top' y 'padding-bottom')

A diferencia de las propiedades del margen, los valores para el relleno no pueden ser negativos.

'padding'
Valores:	<ancho-del-relleno>{1,4} \| inherit
Valor inicial:	no definido para las propiedades resumidas
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	se refieren al ancho del bloque de contención

La propiedad 'padding' es una propiedad resumida que se utiliza para definir los cuatro rellenos a la vez. Los signos {1,4} significan que pueden especificarse de 1 a 4 valores para <ancho-del-relleno>:

Si hay sólo un valor: se aplica a todos los lados
Si hay dos valores: los rellenos superior e inferior son determinados por el primer valor y los rellenos derecho e izquierdo son determinados por el segundo
Si hay tres valores: el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior es definido por el tercero
Si hay cuatro valores: se aplican al relleno superior, derecho, inferior e izquierdo, respectivamente.

El color de la superficie o la imagen del área de relleno es especificado a través de la propiedad 'background' del elemento.

Ver ejemplos

Volver

Propiedades del borde

Las propiedades del borde especifican el ancho, color y estilo del borde de una caja. Estas propiedades se aplican a todos los elementos.

Ancho del borde:

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
Valores:	<ancho-del-borde> \| inherit
Valor inicial:	medium
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

Estas propiedades determinan el ancho de los bordes superior, derecho, inferior e izquierdo de una caja.

<ancho-del-borde> puede tomar uno de los siguientes valores:

thin: Un borde fino
medium: Un borde medio
thick: Un borde grueso
medida: El grosor del borde tiene un valor explícito. Las dimensiones del borde explícitas no pueden ser negativas.

Los interpretación de los tres primeros valores puede variar de un navegador a otro, pero no la relación entre ellos.

'border-width'
Valores:	<ancho-del-borde>{1,4} \| inherit
Valor inicial:	ver las propiedades individuales
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

La propiedad 'border-width' es una propiedad resumida que se utiliza para definir el ancho de los cuatro bordes a la vez. Los signos {1,4} significan que pueden especificarse de 1 a 4 valores para <ancho-del-borde>:

Si hay sólo un valor: se aplica a todos los lados
Si hay dos valores: los bordes superior e inferior son determinados por el primer valor y los bordes derecho e izquierdo son determinados por el segundo
Si hay tres valores: el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior es definido por el tercero
Si hay cuatro valores: se aplican al borde superior, derecho, inferior e izquierdo, respectivamente.

Ver ejemplos

Color del borde:

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
Valores:	<color> \| inherit
Valor inicial:	el valor de la propiedad 'color'
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

Estas propiedades determinan el color de los bordes superior, derecho, inferior e izquierdo de una caja.

Los valores tienen los siguientes significados:

<color>: specifica un valor de color
transparent: El borde es transparente (no obstante, puede tener grosor)

Si el color del borde de un elemento no es especificado, el navegador toma el valor de la propiedad 'color' del elemento para el color del borde.

'border-color'
Valores:	<color>{1,4} \| transparent \| inherit
Valor inicial:	ver las propiedades individuales
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

La propiedad 'border-color' es una propiedad resumida que se utiliza para definir el color de los cuatro bordes a la vez. Esta propiedad puede tener de uno a cuatro valores que son aplicados a los distintos lados como en 'border-width'.

Ver ejemplos

Estilo del borde:

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
Valores:	<estilo-del-borde> \| inherit
Valor inicial:	none
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

Estas propiedades determinan el estilo de los bordes superior, derecho, inferior e izquierdo de una caja.

<estilo-del-borde> puede tomar uno de los siguientes valores:

none: Ningún borde
hidden: Igual a 'none'
dotted: El borde es una serie de puntos
dashed: El borde es una serie de pequeños segmentos de línea
solid: El borde es un único segmento de línea
double: El borde son dos líneas sólidas
groove: El borde luce como si estuviese tallado en la página
ridge: Lo opuesto a 'grove': el borde parece que estuviera sobresaliendo de la página
inset: El borde hace que toda la caja luzca como si estuviera empotrada en la página
outset: Lo opuesto a 'inset': el borde hace que toda la caja parezca sobresalir de la página

Como el valor inicial del estilo de borde es 'none', ningún borde será visible a menos que se establezca otro estilo de borde.

'border-style'
Valores:	<estilo-del-borde >{1,4} \| inherit
Valor inicial:	ver las propiedades individuales
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

La propiedad 'border-style' es una propiedad resumida que se utiliza para definir el estilo de los cuatro bordes a la vez. Esta propiedad puede tener de uno a cuatro valores que son aplicados a los distintos lados como en 'border-width'.

Ver ejemplos

Propiedades resumidas del borde:

'border-top', 'border-right', 'border-bottom', 'border-left'
Valores:	[ <border-width> \|\| <border-style> \|\| <color> ] \| inherit
Valor inicial:	ver las propiedades individuales
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

Estas son propiedades resumidas para definir el ancho, estilo y color del borde superior, derecho, inferior e izquierdo de una caja. Por ejemplo:

P { border-bottom: thick solid red }

La regla anterior define un borde inferior para los párrafos (un línea gruesa entera de color rojo). Los valores que no se especifican son colocados en sus valores iniciales.

'border'
Valores:	[ <border-width> \|\| <border-style> \|\| <color> ] \| inherit
Valor inicial:	ver las propiedades individuales
Se aplica a:	todos los elementos
Se hereda?:	no
Porcentajes:	no admitidos

La propiedad 'border' es una propiedad resumida para colocar el mismo ancho, color y estilo a los cuatro bordes de una caja. A diferencia de las propiedades resumidas 'margin' y 'padding', la propiedad 'border' no puede definir diferentes valores para los cuatro bordes. Para eso, deben usarse una a más de las otras propiedades del borde.

Volver