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 |