H I O X INDIA
CSS Tutorial
 INICIO ||  Scripts  ||  Tutorials  ||  Images  english  Français  中文  Deutsch 

Temas de CSS
Introducción
Tipos de estilo
Propiedades de fondo
Propiedades de texto
Propiedades de fuente
CAJA Propiedades
Frontera Propiedades
Margen de Propiedades
Propiedades Acolchado
Temas Especiales
Pida su Dudas
Reacción



Margen - CSS


Tema

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>

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.




Una nota
CSS - Cascading Style Sheets se puede utilizar junto con etiquetas html, como se explica en este sitio. Esta sencilla CSS le ayudará a crear mucho más elegante y aseado páginas html. Esto no necesita ningún software adicional o códigos. Todos navegador web son capaces de entregar los códigos CSS.

Nota 2: Si es necesario se puede utilizar en lugar de
etiquetas. div etiqueta de inicio y final en líneas nuevas. span no podrán exceder de la etiqueta de zona.


privacy policy     license    
© 2004-2005 HIOX INDIA - hioxindia.com