Problema o Inconveniente con Margenes en css

charldarwin · #1 (**permalink**) 29/08/2012, 23:33

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.

flashmax · #2 (**permalink**) 30/08/2012, 10:42

Haber si así lo solucionas:

Código:

div.margen{
	width:200px;
	margin: 10px 0px 10px 5px;
	padding:0px;
	background-color:#333;
	color:#FFF;
}

charldarwin · #3 (**permalink**) 30/08/2012, 13:36

Cita:

Iniciado por flashmax

Haber si así lo solucionas:

Código:

div.margen{
	width:200px;
	margin: 10px 0px 10px 5px;
	padding:0px;
	background-color:#333;
	color:#FFF;
}

No lo soluciona aun... necesitaria saber si hay aguna forma que el margin bottom(5px) se pueda sumar con el margin top(5px) y generar una distancia de 10 px entre los divs contenidos. Pero de todas formas gracias.

C2am · #4 (**permalink**) 01/09/2012, 21:32

Hola

Cita:

El aspecto más importante relacionado con los márgenes es que CSS fusiona de forma automática los márgenes verticales de los elementos de bloque.

Si en una página web dos elementos de bloque contiguos definen sus propios márgenes verticales (mediante las propiedades margin-top y margin-bottom), el navegador los fusiona de forma automática y muestra un margen vertical igual al mayor de los dos márgenes verticales.

En el siguiente ejemplo, el primer <div> define un margen inferior de 40px, mientras que el segundo <div> define un margen superior de 20px. Como se trata de dos márgenes verticales contiguos, el navegador los fusiona y se queda con el más grande (en este caso, los 40px):

div { margin-bottom: 40px; }
div { margin-top: 20px; }
La fusión automática de márgenes verticales no se realiza en los elementos posicionados mediante la propiedad float y en los elementos posicionados de forma absoluta (position: absolute).

De http://www.librosweb.es/referencia/c...in-bottom.html

Con lo cual tal vez deberías fijar solo el border-top o el bottom con un valor de 10px.
Luego puedes corregir la posición top del primero (si usas border-bottom) mediante un padding en el contenedor, y viceversa si usas border-top.

Saludos

charldarwin · #5 (**permalink**) 03/09/2012, 16:12

Muchas Gracias C2am, esta información me fue de mucha utilidad...

Al final le agregue las propiedades float y clear al css y al parecer me funciona de maravilla:

Código:

div.margen{
	width:200px;
	margin:5px;
	padding:0px;
	background-color:#333;
	color:#FFF;
	clear:both;
	float:left;
}

charldarwin · #6 (**permalink**) 03/09/2012, 16:21

Por cierto para los que deseen ver el resultado final y la prueba de que funciona correctamente. Les agrego el link donde podran visualizar el problema ya resuelto:

http://www.charldarwin.com/margenes-divs/

Espero esta información les sirva a muchos, tal como a mi me sirvio.

Nuevamente Gracias a C2am

por la información acerca de la propiedad float , si no me hubieras brindado esa información, estoy seguro que me hubiese tomado mas tiempo el resolverlo.

Siempre se aprende algo nuevo día a día