gran duda con margin

doylelives · #1 (**permalink**) 06/05/2010, 12:28

Hola gente:
En el siguiente codigo aplico margin a los parrafos pero me surge la duda, si supuestamente es
el espacio entre la caja y las cajas adyacentes.
1 - porque entre el 1° y 2° parrafo no existe 20px de separación?? (Testeado en FF3 y IE8)
2 - en IE8 el 2° parrafo en su margen inferior no existe tal margen

Le apliqué un borde al body para demostrarlo.

Código PHP:

  p{
    background-color:cyan;
    margin:10px;
}
<body style="border-style: solid;border-color:black;border-width:1px;">
<p>Parrafo de texto con alguna palabras resaltadas
</p>
<p>Otro parrafo</p>
</body>

dark_lock · #2 (**permalink**) 06/05/2010, 13:03

Me he quedado de piedra.... yo creo que así debería de pasar lo que dices y como soy muy desconfiado lo probé he hice mil pruebas... como por ejemplo en vez de poner margin solo poner margin pero a los 4 lados por si se comporta de otra manera. Cambié <p> por <div> pero nada...

Acabas de echar por tierra todo lo que sabía de CSS... lo que no entiendo es que yo tengo páginas de esta manera y me jodía que se doblara el margin cuando eran iguales y ahora no pasa :S

Pues eso... no entiendo nada.. si alguien se da cuenta de lo que pasa que lo diga rápido que esta noche no voy a poder dormir

Un saludo

doylelives · #3 (**permalink**) 06/05/2010, 14:00

bueno leyendo se aprende, jeje. Resulta que el comportamiento es el esperado.

Cita:

El comportamiento de los márgenes verticales es más complejo de lo que se puede
imaginar. Cuando se juntan dos o más márgenes verticales, se fusionan de forma
automática y la altura del nuevo margen será igual a la altura del margen más alto de los
que se han fusionado.

dark_lock · #4 (**permalink**) 07/05/2010, 01:30

Ok, ahora me quedo mas tranquilo... eso no pasa cuando los pones en horizontal.

Un saludo

pcexpansion · #5 (**permalink**) 07/05/2010, 03:04

No se de donde has sacado esa cita, pero lo primero sería ponerla. Segundo, eso no es así en ningún caso, o al menos en la mayoría de los casos, LLevo tiempo en esto del diseño y maquetación, y salvo versiones anterioes de Ie, estos problemas no suceden.

doylelives · #6 (**permalink**) 07/05/2010, 06:52

La info:
http://www.librosweb.es/css/capitulo...y_relleno.html

Ah y los margenes contiguos verticales se me fusionan tanto en Internet Explorer y Firefox.

Tecna · #7 (**permalink**) 07/05/2010, 09:40

Buenas,

eso se conoce como márgenes cerrados y como dice doylelives es el comportamiento esperado para los márgenes verticales adyacentes, pero sólo en algunos casos, depende de bastantes cosas, de si son elementos reemplazados o no, en bloque o en línea, de si están posicionados o flotados, de si se les aplica la propiedad clear o no, de si el valor de overflow es visible o no, de si son valores positivos o negativos, en fin que como ya se ha dicho es bastante complejo.