La anchura del margen de los elementos en bloque no flotantes especifica la distancia mínima a los bordes a los cuadros adyacentes. Dos o más márgenes verticales adyacentes (es decir, sin borde, relleno ni contenido entre ellos) se colapsan para usar el máximo de los dos valores de margen. En la mayoría de los casos, después de colapsarse los márgenes verticales, el resultado es visualmente más agradable y más parecido a lo que espera el diseñador. En el ejemplo anterior, los márgenes entre los dos elementos 'LI' se colapsan usando el máximo entre el margen inferior ('margin-bottom') del primer elemento 'LI' y el margen superior ('margin-top') del segundo elemento 'LI'. Análogamente, si el relleno entre el elemento 'UL' y el primer elemento 'LI' (la constante "E") hubiera sido cero, los márgenes del elemento 'UL' y del primer elemento 'LI' habrían sido colapsados.
En el caso de márgenes negativos, el máximo absoluto de los márgenes negativos adyacentes se resta del máximo de los márgenes positivos adyacentes. Si no hay márgenes positivos, el máximo absoluto de los márgenes adyacentes negativos se resta de cero.
La posición y tamaño horizontales de un elemento en bloque no flotante quedan determinados por siete propiedades: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' y 'margin-right'. La anchura de estas siete propiedades es siempre igual a la anchura del elemento padre.
Por defecto, la anchura ('width') de un elemento es 'auto'. Si el elemento no es un elemento reemplazado, esto significa que el AU calcula la anchura de modo que la suma de las siete propiedades mencionadas en el párrafo precedente sea igual a la anchura del padre. Si el elemento es un elemento reemplazado, un valor 'auto' de 'width' se reemplaza automáticamente por la anchura intrínseca del elemento.
Tres de las siete propiedades pueden ser establecidas a 'auto': 'margin-left', 'width' y 'margin-right'. Para los elementos reemplazados, un valor de 'width' igual a 'auto' se reemplaza por la anchura intrínseca, de modo que para ellos sólo puede haber dos valores 'auto'.
El 'width' tiene un valor mínimo no negativo definido por el AU (que puede variar de elemento a elemento e incluso depender de otras propiedades). Si 'width' cae por debajo de este límite, ya sea porque se ha especificado así explícitamente, o porque valiendo 'auto' las reglas que se describen más adelante lo hacen demasiado pequeño, el valor será reemplazado por el valor mínimo.
Si exactamente una de las propiedades 'margin-left', 'width' y 'margin-right' es 'auto', el AU asignará a esa propiedad un valor que haga que la suma de las siete sea igual a la anchura del padre.
Si ninguna de las propiedades vale 'auto', se asignará el valor 'auto' al 'margin-right'.
Si más de una de las tres vale 'auto', y una de ellas es 'width', entonces las otras ('margin-left' y/o 'margin-right') serán puestas a cero, y 'width' recibirá el valor necesario para que la suma de las siete sea igual a la anchura del padre.
De otro modo, si tanto 'margin-left' como 'margin-right' son 'auto', se les asignará el mismo valor. Esto centrará al elemento dentro de su padre.
Si se establece 'auto' como el valor de una de las siete propiedades de un elemento en línea o flotante, se tratará como si se hubiera establecido a cero.
A diferencia de los márgenes verticales, los márgenes horizontales no se colapsan.
Los elementos con un valor de la propiedad 'display' igual a 'list-item' se formatean como elementos en bloque, pero precedidos por un marcador de objeto de lista. El tipo de marcador se determina por la propiedad list-style. El marcador se coloca de acuerdo con el valor de la propiedad list-style:
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>el primer elemento va primero
<LI>el segundo elemento va después
</UL>
<UL CLASS=COMPACT>
<LI>el primer elemento va primero
<LI>el segundo elemento va después
</UL>
Este ejemplo puede formatearse como sigue:
* el primer elemento va primero * el segundo elemento va después * el primer elemento va primero * el segundo elemento va después
Si el texto fuera de derecha a izquierda, los marcadores habrían estado en el lado derecho del cuadro.
Por medio de la propiedad 'float', puede declararse que un elemento esté fuera del flujo normal de los elementos, formateándose entonces como un elemento en bloque. Por ejemplo, haciendo la propiedad 'float' de una imagen igual a 'left', la imagen se mueve hacia la izquierda hasta que se alcanza el margen, relleno o borde de otro elemento en bloque. El flujo normal continuará por el lado derecho. Los márgenes, bordes y relleno del propio elemento serán respetados, y los márgenes nunca se colapsarán con los márgenes de elementos adyacentes.
Un elemento es posicionado de acuerdo con las siguientes restricciones (véase la sección 4.1 para una explicación de los términos):
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
Texto de ejemplo sin más...
</BODY>
Este ejemplo podría formatearse como sigue:
________________________________________ | | max(margen de BODY, margin de P) | m ______________________________ | a | | Texto de ejemplo | r | m | márgenes sin más propósito | g | a | _____ que mostrar cómo se | e | r | | | mueven los elementos | n | g | | IMG | flotantes a la | | e | | | izquierda del | d | n | |_____| elemento padre al | e | | mismo tiempo que se | | d | de IMG respetan sus márgenes, | B | e | bordes y rellenos. | O | |Obsérvese cómo se colapsan los | D | P |márgenes verticales de los | Y | |elementos en bloque no flotantes.
Obsérvese que el margen del elemento 'P' está alrededor del elemento 'IMG' flotante.
Hay dos situaciones en que un elemento flotante puede superponerse con los márgenes, bordes y rellenos de otros elementos: