Espacio entre foto y texto.¿Me echa una mano alguien?

Hola! Cómo puedo conseguir que una imagen y un texto vayan seguidos pero separados por un espacio. ¿Cómo hacer que el texto se situe al lado de la imagen con espacio?

Los tengo en un div, dentro de una lista para que enlacen a otra página y me los coloca juntos, creando un efecto feucho.

¿Me echa una mano alguien? No salgo de esta. gracias


CODE

<div id="enlace">
<ul id="cuadraditos">
<li id="uno">
<a href="#">Ofertas<img src="imagenes/o.gif" alt="" width="50" height="50" /></a></li>
<li id="dos">
<a href="#">Venta<img src="imagenes/boca.gif" alt="" width="50" height="50" /></a>
<li id="tres">
<a href="#">Catálogo PDF<img src="imagenes/por.gif" alt="" width="50" height="50" /></a>
</ul>



y el css

#cuadraditos ul {
list-style-type : none;
margin : 0;
padding : 0;
}

#cuadraditos ul:after {
content : ".";
height : 0;
clear : both;
visibility : hidden;
}

#cuadraditos li {
position : relative;
float : left;
width : 80px;
padding-top: 1em;
padding-right:10px;
padding-bottom: 1em;
padding-left: 20px;
display:inline
list-style-type: none;
}

#cuadraditos li#uno {
border-bottom-color: #E06D42;
border-bottom-style: double;
width:150px;
float:left;

}
#cuadraditos li#dos {
border-bottom-color: #E06D42;
border-bottom-style: double;
border-position: center;
width:150px;
}
#cuadraditos li#tres {
border-bottom-color: #E06D42;
border-bottom-style: double;
width:150px;
}

#cuadraditos img { float : left; }

#cuadraditos li a {
color:#FFFFFF; /*mas*/
text-decoration:none; /*elimino el subrayado del vínculo*/
font-weight:bold; /*decoración*/
font-size: 0.8em;
}

Añadele margen a la imagen:

Código :

#cuadraditos img {float:left;margin:TU_MARGEN;}

Eso hará que la imagen se separe del texto tanto como quieras.

Muchas gracias, me ha servido tu ayuda. Txao