Propiedades del margen

Vamos a usar dos párrafos seguidos y aplicarles las siguientes reglas de estilo respectivamente:

.Parrafo1 {margin-left: 50%;
           margin-right: 20px;
           margin-top: 1em;
           margin-bottom: 6pt;}
.Parrafo2 {margin-right: 50%;
           margin-top: -3em;}

Se aplican al párrafo que sigue:

Este es el primer párrafo de prueba. Para cada margen hemos usado una medida distinta, pero la única que requiere cierta explicación es el porcentaje usado para margin-left: los valores de porcentaje se refieren al bloque de contención, es decir, la caja del elemento padre. En este caso, el elemento padre de este párrafo es <BODY>, entonces su margen izquierdo será la mitad del ancho de la pantalla.

A este segundo párrafo le hemos cambiado el color para distinguirlo del primero porque, debido al margen superior negativo (margin-top: -3em), comienza más arriba que la última línea del anterior. Para evitar que se superpongan, hemos usado margin-right: 50%, de modo que su margen derecho coincide con el margen izquierdo del párrafo anterior. Los márgenes que no han sido definidos (left y bottom) toman el valor inicial de la propiedades, es decir 0 (cero).


Vamos a usar un párrafo dentro de la celda de una tabla para ver el efecto de especificar la propiedad resumida "margin" con 1, 2, 3 y 4 valores.

Si se especifica un solo valor: margin: 2px, este se aplica a los cuatro lados del párrafo:

Un párrafo con margin: 2px

Con dos valores especificados: margin: 20px 8px, el primero (20px) se aplica a los márgenes superior e inferior, el segundo (8px) se aplica a los márgenes derecho e izquierdo:

Un párrafo con margin: 20px 8px

Especificando tres valores, margin: 2em 12px 24px, se aplican en este orden: El primero (2em) al margen superior, el segundo (12px) al derecho e izquierdo, y el tercero (24px) al inferior. Como se ve, se pueden usar distintas unidades de medida para cada valor:

Un párrafo con margin: 2em 12px 24px

Finalmente, especificando cuatro valores, margin: 8px 0px 16px 24px, estos se aplican en este orden: arriba(8px), derecha(0px), abajo(16px), izquierda(24px).

Un párrafo con margin: 8px 0px 16px 24px