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 siendo enlaces (la foto y el texto) y me los coloca juntos, pegados, 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;
}