El margen se resta en elementos paralelos

[IXtremeLT]

Hola que tal buen dia.

Tengo un problema que parece ser muy simple de resolver. El caso es que no al establecer un margen en elementos paralelos entre si, se resta el margen del elemento de al lado con el margen del mismo, asi que si pongo:

Código HTML:

<div style="margin: 5px">Div1</div>
<div style="margin: 5px">Div2</div>
 

Entonces en vez de hacerse 10px de margen de arriba y abajo solo se hacen 5px entre los dos elementos ya que se estan restando los margenes mas la suma del margen del primer elemento, en este caso seria 5px+0px.

Me parece muy buen funcionamiento el sistema de margenes cuando hay elementos paralelos entre si, pero me gustaria saber como puedo quitar esa funcionalidad para que en vez de 5px sean la suma de ambos, es decir, 10px.

Saludos y gracias.

[pitufoweb]

Hola,


Tal ves existe algún truco para hacer lo que pides, pero si quieres 10px de margen, por que no usas 10px envés de 5px?





Saludos

[kseso?]

Margin collapsing:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

[IXtremeLT]

Gracias por las respuestas.

Hola,


Tal ves existe algún truco para hacer lo que pides, pero si quieres 10px de margen, por que no usas 10px envés de 5px?

Bueno, esque lo que quiero es saber si hay una forma de desactivar esa funcionalidad, pero gracias man.

Margin collapsing:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Eso solo explica la forma como funciona pero no explica si hay forma de desactivarlo, thank you.

[emprear]

Hay una serie de técnicas para corregirlo, trabajando con border y padding
http://complexspiral.com/publication...psing-margins/
Obviamente, si lo dicho por @pitufoweb lo resuelve, bienvenida sea la solución.

Otra alternativa, de ser necesario, es usar un div auxiliar (le dí 100px de margen para hacerlo mas evidente)

Código HTML:

<div style="margin: 100px;">Div1</div>
<div style="overflow: hidden; height: 0px; width: 0px;border:none"><!-- fix --></div>
<div style="margin: 100px;">Div2</div>
 

Saludos