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>
Resultado:
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>
Resultado:
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>
Resultado:
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>
Resultado:
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.
|