8.- Capas con las propiedades margin y padding.
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>
