Para separarlos un poco puedes ponerle un padding

Al primero y segundo elemento, es decir, las banderas y el sexo agregales esto margin-right: 5px; claro, puedes cambiar ese 5 por el que te parezca quede mejor C;

Para que te des una idea de como quedaría el código:

<a ="{$post['fid1']}" title="Localización" class="pbbox" style: margin-right: 5px;">

Adiós, si te queda claro y se soluciona, no olvides marcar como solucionado.

intento eso y no sirvio D:

Como quieres separarlo entonces, ami me funciono D:
Prueba con el padding como dice juliens C:

Adiós

Lo puse como me has dicho pero sigue igual XD , bueno luego te pregunto de verdad gracias por ayudarme te llevas rep+ igual tu juliens aunque eres un vago escribiendo $: XD

Que pusiste, entre a tu foro pero no cambiaste el paddign D:

Adiós

Esto debería funcionar:

<a ="{$post['fid1']}" title="Localización" class="pbbox" style=" margin-right: 5px;"> 

No funcaba porque le faltaba un " y no es style: es style=

Aunque igual y este serviría:

<a ="{$post['fid1']}" title="Localización" class="pbbox" style="padding-right: 5px;"> 

Haz probado usar el css margin-top que es para subir y bajar.
Es decir dejar el css como estaba antes con el error y le mandas margin top a la imagenes y ai vez si la subes o la bajas.

Bueno gracias ya lo eh solucionado