CSS1 asume un modelo de formato simple basado en cuadros (boxes), en el que cada elemento formateado da lugar a uno o más cuadros rectangulares. (Los elementos que tienen un valor de 'display' igual a 'none' no son formateados, y por tanto no dan lugar a un cuadro.) Todos los cuadros tienen un área central de contenido, con áreas opcionales a su alrededor de relleno, bordes y márgenes.
_________________________________________
| |
| margen (transparente) |
| __________________________________ |
| | | |
| | borde | |
| | ____________________________ | |
| | | | | |
| | | relleno | | |
| | | ______________________ | | |
| | | | | | | |
| | | | contenido | | | |
| | | |______________________| | | |
| | |____________________________| | |
| |__________________________________| |
|________________________________________|
| anchura del elemento |
| anchura del cuadro |
El tamaño de margen, relleno y borde se establece con las propiedades de margen (5.5.1-5.5.5), de relleno (5.5.6-5.5.10), y de borde (5.5.11-5.5.22) respectivamente. El área de relleno usa el mismo fondo que el elemento en sí (establecido con las propiedades de fondo (5.3.2-5.3.7)). El color y estilo del borde se establecen con las propiedades de borde. Los márgenes son siempre transparentes, de manera que el elemento padre se verá a través de ellos.
El tamaño del cuadro es la suma de la anchura del elemento (es decir, el texto o imagen formateados) y las áreas de relleno, bordes y márgenes.
Desde el punto de vista del formateador hay dos tipos principales de elementos: en bloque y en línea.
Los elementos con un valor de 'display' igual a 'block' o a 'list-item' son elementos en bloque. Asimismo, los elementos flotantes (elementos con un valor de 'float' distinto a 'none') se consideran como elementos en bloque.
El siguiente ejemplo muestra cómo los márgenes y el relleno formatean un elemento 'UL' con dos hijos. Para simplificar el diagrama se ha prescindido de los bordes. Por otra parte, las "constantes" literales del ejemplo no son sintaxis legal de CSS1, pero es un modo conveniente de relacionar los valores de la hoja de estilo con la figura.
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* así el texto es blanco sobre azul */
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>1er elemento de la lista
<LI>2o elemento de la lista
</UL>
_______________________________________________________ | | | A margen del UL (transparente) | | _______________________________________________ | | D | | B | | | E relleno del UL (rojo) | | | | _______________________________________ | | | | H | | F | | | | | a margen del LI (transparente, | | | | | | se ve el rojo a través suyo) | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e relleno de LI (azul) | | | | | | | | | | | | | | | | h 1er elemento de la lista f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | max(a, c) | | | <- nótese | | | _______________________________ | | | el max | | | | | | | | | | | d | e relleno del LI (azul) | | | | | | | | | | | | | | | | h 2o elemento de la lista f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | c margen del LI (transparente, | | | | | | se ve el rojo a través suyo) | | | | | |_______________________________________| | | | | | | | | G | | | |_______________________________________________| | | | | C | |_______________________________________________________|
Técnicamente, las propiedades de relleno y margen no se heredan. Pero como muestra el ejemplo, la colocación de un elemento es relativa a los ascendientes y hermanos, de modo que las propiedades de relleno y margen de estos elementos tienen efecto en sus hijos.
Si hubiera habido bordes en el ejemplo anterior, habrían aparecido entre el relleno y los márgenes.
El siguiente diagrama introduce cierta terminología útil:
--------------- <-- parte superior
margen superior
---------------
borde superior
---------------
relleno superior
+-------------+ <-- parte superior interna
| | | | | | | |
|-margen-|-borde--|-relleno|--contenido--|-relleno-|--borde--|--margen-|
| izq. | izq. | izq. | | derecho | derecho | derecho |
| | | | | | | |
+-------------+ <-- parte inferior interna
^ ^ ^ ^
lado lado interior lado interior lado
exterior izquierdo derecho exterior
izquierdo relleno inferior derecho
---------------
borde inferior
---------------
margen inferior
--------------- <-- parte inferior
El lado exterior izquierdo es el lado de un elemento incluido su relleno, su borde y su margen. El lado interior izquierdo es el lado del contenido únicamente, por dentro de relleno, borde y margen. Lo mismo para los lados derechos. La parte superior es la parte superior del elemento incluyendo relleno, borde y margen; sólo se define para elementos en línea y elementos flotantes, no para elementos en bloque no flotantes. La parte superior interna es la parte superior del contenido, por dentro de relleno, borde y margen. La parte inferior es la parte inferior del elemento, por fuera de relleno, borde y margen. Sólo está definida para elementos en línea y flotantes, no para elementos en bloque no flotantes. La parte inferior interna es la parte inferior del elemento, por dentro de relleno, borde y margen.
La anchura de un elemento es la anchura del contenido, es decir, la distancia entre el lado interior izquierdo y el lado interior derecho. La altura es la altura del contenido, es decir, la distancia entre la parte inferior interna y la parte superior interna.