Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/08/2012, 23:33
charldarwin
 
Fecha de Ingreso: septiembre-2009
Mensajes: 7
Antigüedad: 15 años, 2 meses
Puntos: 0
Problema o Inconveniente con Margenes en css

Hola sres. en esta ocasión les escribo por lo siguiente, teng un maquetado que no me esta funcionando en realidad como deseaba. a continuación les comparto el codigo HTML y el codigo CSS respectivamente:
Código:
<html>
<head>
<title>Documento sin título</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="principal">
<div class="margen">contenido 1</div>
    <div class="margen">contenido 2</div>
    <div class="margen">contenido 3</div>
</div>
</body>
</html>
Código:
/* CSS Document */
body{margin:0px;
padding:0px;}
div#principal{
	width:800px;
	background-color:#CCC;
	margin:0px;
	padding:0px;
	min-height:500px;
	overflow:hidden;
}
div.margen{
	width:200px;
	margin:5px;
	padding:0px;
	background-color:#333;
	color:#FFF;
}
el resultado lo tengo publicado en el siguiente link: http://www.charldarwin.com/margenes-divs/

Ese es el codigo que he elaborado, pero me encuentro con un problema. en la zona de contenido 2, segun lo que yo tengo entendido deberia tener 10 px de margin-top y margin-bottom. Puesto que le indico como margin general 5px. para los 3 divs contenido.

Necesito que los margin logren separar al div contenido 2 en 10 px superior e inferior. mejor dicho que sume los margin entre lo divs para generar el espacio de 10px(suma de margin-bottom(contenido 1) + el margin-top(contenido 2)) espero me puedan ayudar a conseguirlo sin necesidad de tener que dar le una distancia margin individual al contenido 2, solo sumar los margin mencionados. Gracias desde ya por la ayuda brindada.