Let me begin with a few pointer that should makes things easier to understand.
Use indentation when you code. With one tag per line. You can use for leading spaces to make it clear that there is a space in front of the text. nbsp == non breaking space, so using it between two words will prevent the line from wrapping at that specific space.
<span class= "greentext">
<a href="../example" title="Example - Home">
<img alt="Example - Home" src="../example.png" style="margin-bottom: -0.9%">
</a>
<br>
Text
</span>
<span class= "bluetext">
Text
</span>
My understanding is that you want to reproduce what was there. So you want the margin to apply to the img tag specifically.
Let start with why it doesn't work. By adding the class to the span tag you are styling the span specifically so the margin applies to span and not the elements in the span.
So there are several way to do that. In all case you need to remove the inline styling (obviously)
You can simply use the tag, if this margin will apply to all images.
img {margin-bottom: -0.9%;}
You can be more specific:
a img {margin-bottom: -0.9%;}
this now applies to all "img" tags in an "a" tag
Or you can do as you did declare a new class:
.imgmargin {margin-bottom: -0.9%;}
and add the class to the img tag
<span class= "greentext">
<a href="../example" title="Example - Home">
<img alt="Example - Home" src="../example.png" class="imgmargin">
</a>
<br>
Text
</span>
<span class= "bluetext">
Text
</span>
On a side note, it is typically not good practice to put an "img" tag as a descended of a "span". "span" is generally used for text elements. I'm not even sure it would pass validation. I assume that you are doing this because you would like the elements to inlined.
I would do something like this
<style>
.some-class{display:inline;}
.imgmargin {margin-bottom: -0.9%;}
</style>
<div class="some-class">
<a href="../example" title="Example - Home">
<img alt="Example - Home" src="../example.png" class="imgmargin">
</a>
<br>
<span class= "greentext">
&nsbp;Text
</span>
<span class= "bluetext">
Text
</span>
</div>
Of course I am only guessing because I'm not sure about what exactly you want to achieve and what the other elements on the page are.
I hope my long winded answer helps.
