Buenas,
este comportamiento se presenta cuando hay espacios en blanco o saltos de línea en el código html entre elementos en línea. El div aunque es un elemento en bloque se transforma al aplicar la propiedad display: inline-block y funciona como un elemento en línea por eso aparece el "margen fantasma". Si el código fuera:
sin ningún espacio entre las etiquetas, los divs quedarían completamente pegados uno al lado del otro sin necesidad de definir propiedades css nuevas.
El motivo por el que al definir la propiedad float se arregla el problema es porque al flotar un elemento también se convierte en un elemento en bloque (y este problema sólo se presenta en elementos en línea), es decir cuando el valor declarado de la propiedad display es inline o inline-block entre otros, el valor computado pasa a ser block si el valor de la propiedad float es distinto de none. Esto puede comprobarse con firebug o similares