Problema con spans

[albert84]

Hola

Tengo un problema que no se como solucionar (bueno he llegado a una solución pero no me convence y no la entiendo)

Os esxplico lo que quiero conseguir. Tengo varios <p></p> donde hay texto y quiero que determinadas palabras o conjuntos de palabras del <p> esten enmarcadas en negrita y despues de la palabra una imagen a la derecha donde poder hacer click, dentro del mismo marco.

Como lo harian?

De momento tngo que estas palabras estan así:

Código HTML:

<span class="marco">PALABRA N <span class="detalle">&nbsp;</span></span>

.marco{
	border: 1px solid black;
	font-weight: bold;
}

.delalle{
    cursor: pointer;
    margin-left: 5px;
    padding-right: 14px;
    width: 16px;
    height: 16px;
    background:url('imagen.png') no-repeat;
}

Así funciona por lo menos en firefox, pero si inspecciono el elemento, el span de detalle no tiene el width que marca. A parte para que se vea la imagen tengo que hacer la chapuza del padding-right: 14px;


Como lo solucionarian?

Gracias

[albert84]

Quitando en detalle el padding-right y añadiendo display: inline-block; me funciona y ya es una solución mas elegante, lo que ahora no consigo es el detalle bajarlo unos pixeles hacia abajo, el margin-top no me hace caso, ni el padding-top