Margen - CSS

Creando márgenes en páginas html usando CSS

Explicación


Propiedad :

Margen
Todos los márgenes (arriba, derecha, abajo, izquierda) pueden ser combinadas usando una simple etiqueta. Uso:
margin: 20px;
margin: 10px 20px 30px 10px;
margin: 10px 20px;
margin: 20px 10px 30px;

Definición:
El margen se puede establecer usando la etiqueta "margin".
Toma los valores siguientes.
a)20px : Esto establece un margen de 20px en los cuatro lados (arriba, abajo, izquieda, derecha).
b)10px 20px 30px 10px: Este formato establece el margen en orden de arriba, derecha, abajo, izquierda.
c)10px 20px : Este formato establece el margen para arriba y derecha. Abajo tomará el valor del margen superior (10px) e izquierda tomará valor del margen derecho (20px).
d)20px 10px 30px: Este formato establece el margen superior, derecho e inferior. Izquierdo tomará valores del margen derecho.
Los valores pueden ir en porcentaje, puntos o píxeles.

Ejemplo 1:


<div align=right style="margin: 20px;">
Aquí tenemos un margen de 20 píxeles.
Puedes ver que este párrfo tiene márgenes en los cuatro lados.
</div>

Resulta:


Aquí tenemos un margen de 20 píxeles. Puedes ver que este párrfo tiene márgenes en los cuatro lados.

Ejemplo 2:


<div style="margin: 10px 50px 30px 5px;">
Aquí hemos establecido un margen con cuatro valores.
Puedes ver que este párrafo tiene margen de 10px arriba, 50px a la derecha, 30px abajo y 5px a la izquierda.
</div>

Resulta:



Aquí hemos establecido un margen con cuatro valores. Puedes ver que este párrafo tiene margen de 10px arriba, 50px a la derecha, 30px abajo y 5px a la izquierda.

Ejemplo 3:


<div style="margin: 20px 40px;">
Aquí hemos establecido un margen con dos valores.
Puedes ver que este párrafo tiene márgenes de 20px arriba y abajo y 40px a la derecha e izquierda.
</div>

Resulta:


Aquí hemos establecido un margen con dos valores. Puedes ver que este párrafo tiene márgenes de 20px arriba y abajo y 40px a la derecha e izquierda.

Ejemplo 4:


<div style="margin: 10px 50px 40px;">
Aquí establecemos un margen con tres valores.
Puedes ver que este párrafo tiene márgenes de 10px arriba, 50px a la derercha, 40px abajo. El margen izquierdo toma valores de la derecha como 50x.
</div>

Resulta:


Aquí establecemos un margen con tres valores. Puedes ver que este párrafo tiene márgenes de 10px arriba, 50px a la derercha, 40px abajo. El margen izquierdo toma valores de la derecha como 50x.