| En este tutorial voy a explicar el modelo de cajas, es decir, las propiedades que se le pueden aplicar a cualquier caja y su forma de funcionamiento. |
| Muchas de las definiciones son extraidas tal cual o simplificadas de la Recomendación de W3C sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1), y de la Recomendación del W3C "HTML 4.01 Specification" que están en la Sección HTML/CSS de esta web. |
| El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos en la estructura del documento. Cualquier texto o elemento de nuestra web está contenido dentro de una caja. Estas cajas tienen unas propiedades como son la altura y la anchura, los bordes, el relleno (padding) y los márgenes (margin). |
| El siguiente gráfico muestra la estructura de una caja segun CSS y donde se encuentran ubicados cada uno de los componentes que he citado antes. |
 |
| Sobre la altura y la anchura de la caja (HEIGHT y WIDTH) ya he hablado muy detalladamente en los anteriores tutoriales. Solo diré aquí que lo que definen en principio es la altura y anchura del "contenido", tal y como lo especifica el W3C (mirar el gráfico anterior). El resto de propiedades quedan fuera de esas medidas. |
| Esto significa, que la anchura total de cualquier elemento es la resultante de sumar el ancho de los márgenes izquierdo y derecho, el ancho de los bordes izquierdo y derecho, el ancho de los rellenos izquierdo y derecho, y el ancho del contenido (especificado con la propiedad WIDTH). |
| Del mismo modo, la altura de una elemento es el resultado de sumar el ancho de los márgenes superior e inferior, el ancho de los bordes superior e inferior, el ancho de los rellenos superior e inferior, y la altura del contenido (especificada con la propiedad HEIGHT). |
| |
 MARGIN (MARGIN-TOP, MARGIN-BOTTOM, MARGIN-LEFT, MARGIN-RIGHT)
|
| Esta propiedad determina la anchura del margen de la caja. Entendemos como margen al espacio que hay entre el borde de la caja y los elementos que la rodean. La anchura de los márgenes se puede establecer por separado permitiendo dar a la caja diferente margen por cada lado, utilizando para ello sus derivaciones para cada orientación (MARGIN-TOP (superior), MARGIN-BOTTOM (inferior), MARGIN-LEFT (izquierdo), MARGIN-RIGHT derecho)). |
| Los márgenes verticales (margin-top y margin-bottom) sólo tienen efecto en los elementos de bloque y las imágenes, mientras que los márgenes laterales (margin-left y margin-right) se pueden aplicar a cualquier elemento. |
| Los valores que puede tomar son los siguientes: |
|
 Valor exacto: |
|
Es decir, una anchura determinada. Hay muchas formas de establecer las medidas en una web. En este caso utilizaré px, que son píxels y reflejan medidas absolutas. |
|
Porcentaje: |
|
Este porcentaje se calcula con respecto a la anchura del bloque que contiene a la caja con la que estamos trabajando. |
|
Auto: |
|
Buscará un margen equivalente a izquierda y derecha que deje centrada la caja respecto al bloque o caja que la contiene (el auto no hace nada en los margenes verticales). |
| |
|
| NOTA: Se permite utilizar valores negativos de margen. |
| Como ejemplo, para ponerle un margen superior de 5px a una caja que tiene como identificador, por ejemplo, 'recuadro', escribiremos en nuestra hoja de estilos: |
| #recuadro {margin-top: 5px;} |
| Si lo que deseamos es poner un margen a todos los lados del elemento: |
| #recuadro {margin: 5px;} |
| Pero tambien podemos poner diferentes combinaciones con la propiedad margin y definir sólo con ella los cuatro márgenes, con diferentes valores. Así, si ponemos dos valores: |
| #recuadro {margin: 5px 10px;} |
| el primer valor se aplica a los márgenes superior e inferior, y el segundo valor a los márgenes izquierdo y derecho. |
| Para tres valores, el primero es para el margen superior, el segundo para los dos márgenes laterales y el tercero para el margen inferior. |
| |
| IMPORTANTE: MÁRGENES CERRADOS |
| Márgenes cerrados significa que los márgenes adyacentes (es decir, que no tienen entre ellos ningun contenido vacío, rellenos o bordes) de dos o más cajas se combinan en uno solo. |
| Ésta situación pasa en varias situaciones (ver Recomendación de W3C sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1)), pero la más común, sobre todo cuando maquetamos una web, es cuando hay dos cajas adyacentes, o padre e hija, en flujo normal (es decir, con position relative). En estos casos, los margenes verticales adyacentes, se cierran (se funden en uno sólo). |
| |
|
| Esto nos puede volver locos si no lo tenemos en cuenta. |
| NOTA: Los ejemplos siguientes no funcionan de la misma forma en IExplorer. IExplorer tiene un comportamiento que no está de acuerdo con las directrices del W3C. Hablaré de las diferencias de IExplorer en cuanto a margenes, bordes y rellenos en el siguiente tutorial. |
| Pongamos un fichero html con la siguiente estructura: |
 |
| y con su hoja de estilos con este contenido: |
 |
| En este caso, si ejecutamos el código ' EJEMPLO 1 ', el margen izquierdo de la caja "recuadro" es perfectamente visible, pero el margen superior no aparece. Ésto es porque al no haber ningún elemento entre la caja "principal" y la caja "recuadro" el margen superior (vertical) se cierra y se une al margen de la caja "principal". Como no tiene ninguno, ambas cajas se desplazan hacia abajo 5px. Visualmente parece que el margen superior no ha tenido efecto, pero sí que lo ha tenido, desplazando ambas cajas, y no la interior, que es lo que buscábamos. |
| Para estos casos, con posicionar la caja "recuadro" de forma absoluta, o con colocarle un borde a la caja principal (si no queremos ponerselo, siempre podemos ponerle el mismo color que a la caja), bastaría para que este comportamiento desapareciera. |
 |
| Modificando la propiedad POSITION, el resultado es ' EJEMPLO 2' |
| |
PADDING (PADDING-TOP, PADDING-BOTTOM, PADDING-LEFT, PADDING-RIGHT) |
| Esta propiedad determina la anchura del relleno de la caja. Entendemos como relleno al espacio que hay entre el contenido de la caja y el borde de la misma. La anchura del relleno se puede establecer por separado permitiendo dar a la caja diferente relleno por cada lado, utilizando para ello sus derivaciones para cada orientación (PADDING-TOP (superior), PADDING-BOTTOM (inferior), PADDING-LEFT (izquierdo), PADDING-RIGHT derecho)). |
| Los valores que puede tomar son los siguientes: |
|
Valor exacto: |
|
Es decir, una anchura determinada. |
|
Porcentaje: |
|
Este porcentaje se calcula con respecto a la anchura del bloque que contiene a la caja con la que estamos trabajando. |
| |
|
| Para valores múltiples de padding, esta propiedad funciona de la misma forma que margin. |
| NOTA: En contraposicion a la propiedad margin, padding no permite utilizar valores negativos. |
| NOTA: El color del área de relleno es especificado a través de la propiedad background de la caja en cuestión. |
| Poniendo un ejemplo sencillo, si tenemos el fichero html siguiente: |
 |
| y con la siguiente hoja de estilos: |
|
| Vemos al ejecutar el fichero ' EJEMPLO 3', que la palabra "HOLA" queda ubicada justo arriba a la izquierda de la caja que la contiene ("recuadro"). |
| Si modificamos la hoja de estilos de la siguiente forma, añadiendo un pagdding superior: |
 |
| Vemos al ejecutar el fichero ' EJEMPLO 4', que la palabra "HOLA" queda desplazada hacia abajo 10 pixels, que son los que hemos especificado en la hoja de estilos con la sentencia PADDING-TOP: 10px; . |
| Observe claramente como el padding es interior a la caja (se ve porque el espacio que queda sobre la palabra "HOLA" es de color amarillo, como el fondo de la caja "recuadro") mientras que el margin es exterior. |
| |
BORDER-WIDTH (border-top-width, border-bottom-width, border-left-width, border-right-width) |
| Esta propiedad determina, la anchura del borde de la caja. El borde se situa entre el fin del area de relleno y el comienzo del area de margen. Como en los casos anteriores, la anchura del borde se puede establecer por separado para cada uno de sus lados. |
| Los valores que puede tomar son los siguientes: |
|
thin: |
|
Un borde fino. |
|
medium: |
|
Un borde mediano. |
|
thick: |
|
Un borde grueso. |
|
Valor exacto: |
|
Es decir, una anchura determinada. |
| |
|
| Para valores múltiples de border-width, esta propiedad funciona de la misma forma que margin. |
| |
BORDER-COLOR (border-top-color, border-bottom-color, border-left-color, border-right-color) |
| Esta propiedad determina el color del borde de la caja. |
| Los valores que puede tomar son los siguientes: |
|
valor: |
|
la palabra clave que define al color o un código hexadecimal de 6 caracteres: maroon #800000, red #ff0000, orange #ffA500, yellow #ffff00, olive #808000, purple #800080, fuchsia #ff00ff, white #ffffff, lime #00ff00, green #008000, navy #000080, blue #0000ff, aqua #00ffff, teal #008080, black #000000, silver #c0c0c0, gray #808080. |
|
palabra clave -transparent- |
|
para hacer que los colores subyacentes se vean a través. |
| |
|
| Para valores múltiples de border-color, esta propiedad funciona de la misma forma que margin. |
| |
BORDER-STYLE (border-top-style, border-bottom-style, border-left-style, border-right-style) |
| Esta propiedad determina el estilo de la línea del borde de la caja. |
| Los valores que puede tomar son los siguientes: |
|
none: |
|
ningún borde; el ancho del borde es cero. |
|
hidden: |
|
Igual que 'none', excepto en términos de resolución de conflictos de bordes para los elementos de tablas. |
|
dotted: |
|
El borde es una serie de puntos. |
|
dashed: |
|
El borde es una serie de pequeños segmentos de líneas. |
|
solid: |
|
El borde es un único segmento de línea. |
|
double: |
|
El borde son dos líneas sólidas. La suma de las dos líneas y el espacio entre ellas es igual al valor de 'border-width'. |
|
groove: |
|
El borde luce como si estuviera tallado en el lienzo. |
|
ridge: |
|
Lo opuesto a 'groove': el borde parece que estuviera sobresaliendo (en relieve) del lienzo. |
|
inset: |
|
El borde hace que toda la caja luzca como si estuviera empotrada (hundida) en el lienzo. |
|
outset: |
|
Lo contrario de 'inset': El borde hace que toda la caja parezca sobresalir (en relieve) del lienzo. |
| |
|
| Para valores múltiples de border-style, esta propiedad funciona de la misma forma que margin. |
| |
BORDER (BORDER-TOP, BORDER-BOTTOM, BORDER-LEFT, BORDER-RIGHT) |
| Esta propiedad determina todas las propiedades de los bordes resumidas, es decir, la anchura, el color y el estilo del borde de la caja. |
| El orden de los valores es el siguiente: |
|
border-width border-style border-color |
| |
|
| NOTA: Con la propiedad border no se pueden definir distintos valores para cada lado del borde de la caja. Para ello hay que usar las propiedades específicas. |
| Por ejemplo, para definir el borde de la caja "recuadro" como de color azul, de estilo sólido y de ancho 3 pixels la instrucción en la hoja de estilos sería: |
| #recuadro { border: 3px solid blue;} |
Español
English
