La diferencia principal entre <div> y <span> es que <div> es un elemento de nivel de bloque y el <span> es un elemento de nivel en línea y l verdad es que a veces despreciamos ambas características, block e inline.
Como su propio nombre lo indica, los elementos de bloque son visibles en forma de bloques, como un marco de fotos, mientras que los en línea (<span>) se como una cadena, uno a continuación del otro.
El siguiente ejemplo mostrará a través del HTML estas propiedades de manera más ilustrativas. Supongamos que tenemos dos divs y dos spans en el siguiente orden:
<div>Este es el bloque uno</div>
<div> Este es el bloque dos</div>
<br />
<span>Este es el elemento inline uno</span>
<span> Este es el elemento inline dos</span>
Añadimos al HTML los siguientes estilos:
div{border:1px solid #000; padding:10px;}
span{border:1px solid #000; padding:10px;}
Te darás cuenta que los elementos div ocupan toda una línea mientras que los elementos span se colocan uno tras del otro.
A tener en cuenta:
Los elementos inline no responden a márgenes top o bottom a no ser que los transformemos en elementos de bloque; se pueden cambiar a bloque mediante CSS, así como los elementos de bloque a inline como muestra el siguiente código:
div{display:inline}
span{display:block}
