diferencias entre DIV y SPAN

davidvamo · #1 (**permalink**) 08/07/2004, 03:11

Muy buenas geni@s,

tengo la siguiente duda: ¿que diferenciaes existen entre DIV y SPAN?

Me han pasado el siguiente código y no acabo de entender la diferencia entre div y span.

Código PHP:

  <html>

    <head>

        <title>

            Pestañas

        </title>

        <script language="javascript">

            function ocultarTodo()    {

                indicadores = document.getElementById("cabecera").getElementsByTagName("div");

                for (var i = 0; i < indicadores.length; i ++)

                    indicadores[i].style.display = "none";

 
            }

        </script>

    </head>

 
    <body>

        <div align=center>

            <div id="cabecera" >

                <span onclick="ocultarTodo(); document.getElementById('cuerpo1').style.display = 'block'"

                    style="background-color: #eeeeee; border-width: 2px; border-style: ridge ridge none ridge; border-color: red;">

                    Mostrar capa 1

                </span>

                &nbsp;

                <span onclick="ocultarTodo(); document.getElementById('cuerpo2').style.display = 'block'"

                    style="background-color: #dddddd; border-width: 2px; border-style: ridge ridge none ridge; border-color: blue;">

                    Mostrar capa 2

                </span>

                <div id="cuerpo1" style="width: 80%; border: 1px none red; background-color: #eeeeee; display: block;">

                    Este es el contenido de la capa 1

                    <br />

                    <br />

                    <br />

                </div>

                <div id="cuerpo2" style="width: 80%; border: 1px none blue; background-color: #dddddd; display: none;">

                    Este es el contenido de la capa 2

                    <br />

                    <br />

                    <br />

                </div>

            </div>

        </div>

    </body

</html>

Gracias.

caricatos · #2 (**permalink**) 08/07/2004, 03:51

Hola davidvamo:

Reconozco en el código mi inconfundible estilo...

En otras ocasiones dije que un span con display: block se ve igual que un div, y que un div con display: inline se ve igual que un span...

Div tiene también otros atributos (al menos align) pero se puede simular con estilos.

Pero lo que realmente creo que importa es el uso que se le quiera dar... los divs (capas) son apropiados para agrupar elementos (es recomendable su uso), y span se suele usar para aplicar estilos... me parece que la intención es suplantar a otros tags como i, b, u... etc.

Saludos

tunait · #3 (**permalink**) 08/07/2004, 04:55

Buenas

Resumiendo se puede decir que div es un contenedor de bloque, y span es un contenedor de línea. Esto quiere decir que span puede estar insertado en el medio de una línea y en cambio div provocaría un salto de línea en el mismo contexto.

Quien a buen <span style="color: #ff0000">plato de sopa</span> se arrima buena cuchara le madruga

Eso se visualizará así

Quien a buen plato de sopa se arrima buena cuchara le madruga

En cambio lo mismo con div....

Quien a buen <div style="color: #ff0000">plato de sopa</div> se arrima buena cuchara le madruga

se visualizará así

Quien a buen plato de sopa
se arrima buena cuchara le madruga

(con el salto de línea)

Como menciona caricatos (holaaa....

) si a un div se le aplica un display: inline se comportará como un span y a un span si se le aplica un display: block se comportará como un div