how to make space within span show up

Another option if you do not want to rely on CSS for any reason is using the non-breaking space:  ,   or  

(see here for more information about it)

Alter your css for the span to show white spaces, just like in the <pre> tag. Take a look at the different white-space options

span {
    background-color: black;
    white-space:pre;
}

From the mentioned resource here is a nice table what the different options for white-space will do:

               New lines    Spaces and tabs   Text wrapping
normal         Collapse     Collapse          Wrap
pre            Preserve     Preserve          No wrap
nowrap         Collapse     Collapse          No wrap
pre-wrap       Preserve     Preserve          Wrap
pre-line       Preserve     Collapse          Wrap

If you add a   to your span, the string will not break anymore on your space but instead 'glue' the two parts together, without wrapping the string on the space.