Strange margins when indenting a <span class>?

I’m using inline html span tags to highlight various bits of text in different colours. As these are quotes extracted from books / articles, I would like to keep them indented with the reference info on top.

When using a span class in a normal line of text it works fine, but when indenting with the span at the beginning the margins become very strange (first line normal, aka no indent, with following lines of text pushed fully to the right):


I experimented with different formats and discovered that the indent will apply normally if I add text at the beginning of the line:


For the short term I can add a full stop to work around this issue, but ideally I would prefer not to do this.
I’m not sure if this counts as a bug, or if its something I can fix, but would appreciate some help / guidance?