Buscador


En todo Internet
En Uterra.Com

¿Problemas sexuales?
Jerez de la Frontera
y Cádiz
Homosexualidad, infidelidad, divorcio, violencia de género, etc.

Contenidos


Bajo la propiedad margin de CSS se delimita la distancia en los cuatro posibles sentidos de una capa o div con las adyacentes. Los valores hacen referencia a las siguientes distancias:

El primer valor se refiere a la distancia desde la parte superior de la capa.

El segundo valor se refiere a la distancia por la derecha.

El tercero se refiere a la distancia por abajo

Y el cuarto y último se refiere a la distancia por la izquierda.

Por tanto, para recordar las posiciones de los valores y el lado al que hacen referencia, pensemos en el sentido de giro de las agujas de un reloj tomando como centro el centro de la capa. Comienza por arriba, y continuando el giro, pasa primero por la derecha, segundo por abajo, y por último por la izquierda.

La posición de estos valores es idéntica para la propiedad "padding", pero la diferencia entre margin y padding es que padding se refiere a la distancia entre los elementos internos de la propia capa y sus extremos.

En la demo puede ver dos capas, que aparte del color de fondo, solo cambian las propiedades margin y padding, y ambas con identicos parámetros.

<html> 

<head>
<title>Las propiedades margin y padding de CSS</title>

<style type="text/css">
<!--  
#texto1 {
    text-align:justify;                      /* alinacion del texto */
    margin: 40px 30px 20px 10px;    /* margen con valores: arriba - derecha - abajo - izquierda */
        background-color:#FFAA71;           /* Color de fondo */  
        width: 300px;                       /* Ancho de la capa */ 
}

#texto2 {
    text-align:justify;                      /* alinacion del texto */
    padding: 40px 30px 20px 10px;   /* margen con valores: arriba - derecha - abajo - izquierda */
        background-color:#66CCFF;            /* Color de fondo */  
       width: 300px;                        /* Ancho de la capa */
}
-->  
</style> 

</head> 

<body> 

   <DIV ID="texto1">  
     Esto es un ejemplo de capa con la propiedad - margin - de CSS. 
     Para muchos webmaster estas dos propiedades presentan confusión,
     no obstante son claramente diferentes, esta es una demostración 
     gráfica de sus diferencias. Entre las dos capas, aparte de la 
     propiedad margin o padding solo cambia el color de fondo, los 
     demas parámetros son identicos.
   </DIV>
   
   <DIV ID="texto2">  
     Esto es un ejemplo de capa con la propiedad - padding - de CSS.
     Mientras margin se refiere a la distancia con elementos adyacentes 
     padding marca la distancia entre el contenido y el borde de la capa. 
   </DIV>

</body> 

</html>