Positioning text on images?

Hi, could somebody tell me how I can position the text in each of the buttons below, 10px from the right side of each button?
Thanks

<style>
a.delete,a.edit,a.quote{color:#fff;}
a.delete:hover,a.edit:hover,a.quote:hover{text-decoration:none}
.delete,.edit,.quote{width:48px;height:18px;display:inline-block;}
.quote{background:url(http://card123.danmackay.com/skins/ParadiseBlue/BLANK_button_small.gif) no-repeat}
.edit{background:url(http://card123.danmackay.com/skins/ParadiseBlue/BLANK_button_small.gif) no-repeat}
.delete{background:url(http://card123.danmackay.com/skins/ParadiseBlue/BLANK_button_small.gif) no-repeat}
</style>

<a href="#" class="edit">1</a> 
<a href="#" class="delete">2</a> 
<a href="#" class="quote">3</a>

HTML:

 

Something like this.

<style>
a.delete,a.edit,a.quote{color:#fff;}
a.delete:hover,a.edit:hover,a.quote:hover{text-decoration:none}
.delete,.edit,.quote{width:48px;height:18px;display:inline-block;}
.quote{background:url(http://card123.danmackay.com/skins/ParadiseBlue/BLANK_button_small.gif) no-repeat}
.edit{background:url(http://card123.danmackay.com/skins/ParadiseBlue/BLANK_button_small.gif) no-repeat}
.delete{background:url(http://card123.danmackay.com/skins/ParadiseBlue/BLANK_button_small.gif) no-repeat}
a.delete span,a.edit span,a.quote span{display:block;text-align:right;padding-right:10px}
</style>

<a href="#" class="edit"><span>1</span></a> 
<a href="#" class="delete"><span>2</span></a> 
<a href="#" class="quote"><span>3</span></a>

Code (markup):

 

Exactly what I was looking for, thank you

 

No problem