Elemento mismo nivel y anidado

[trhipahx]

Hola

Siguiendo el curso:
http://www.ignside.net/man/css/posicionamiento.php

Me he encontrado con lo siguiente:

tres elementos del mismo nivel, posicionados relativamente

<SPAN STYLE="position:relative; background-color:#90EE90">
Green relative element.
</SPAN>
<SPAN STYLE="position:relative; background-color:#ADD8E6">
Blue relative element.</SPAN>
<SPAN STYLE="position:relative; background-color:#FFB6C1">
Red relative element.</SPAN>

¿quieres verlo?

tres elementos anidados, posicionados relativamente

<SPAN STYLE="position:relative; background-color:#90EE90">
Green relative element.
<SPAN STYLE="position:relative; background-color:#ADD8E6">
Blue relative child of green.
<SPAN STYLE="position:relative; background-color:#FFB6C1">
Red relative child of blue.
</SPAN>
</SPAN>
</SPAN>
¿quieres verlo?



En el primer caso aparecen los tres elementos separados entre sí por un pequeño espacio en blanco y en el segundo sus colores de fondo aparecen completamente juntos
¿a qué se debe?

Gracias

[Mikmoro]

Pruébalo así a ver:

<SPAN STYLE="position:relative; background-color:#90EE90">Green relative element.</SPAN><SPAN STYLE="position:relative; background-color:#ADD8E6">Blue relative element.</SPAN><SPAN STYLE="position:relative; background-color:#FFB6C1">Red relative element.</SPAN>

[jepsersk8]

Mikmoro tiene toda la razon, eso se debe a que los exploradores toman como un espasito el que utilices "enter" entre las sentencia y su contenido... por eso, solo ponlo en una sola linea todo sin enter y listo!

[trhipahx]

Que cursioso!!!!!

Muchas gracias.