I'm trying to do something that sounds simple, but isn't. At least for me it isn't

This is what I want:
telok.png

This is what I get when I put the image and the text in a <p>
teltoolong.png
code:
Code HTML4Strict:
        <p class="telefono">
          <img src="img/phone.png">+9999999999999
        </p>
Code CSS:
.telefono {
  background: #fefefe; 
  border: 0.1em solid red;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
  color: #000000;
	padding: 0.1em;
	margin: 0;
}
 
.telefono img {
	vertical-align:middle;
	margin: 0;
	padding: 0;
}
The <p> stretches until the end of the containing div. I don't want that.
Also the image and the text are slightly disaligned, but that might be caused by the round corners?

This is what happens when I put a span around the image and the text:
teloutsidespan.png
code:
Code HTML4Strict:
        <p>
          <span class="telefono"><img src="img/phone.png">+9999999999999</span>
        </p>
the CSS doesn't change.
As you can see, the box closes nicely around the text, and the text is aligned perfectly, but the image is going outside of the span (or the span doesn't include the entire image).

When I add display: block; to the span's css, it behaves exactly as it did with the <p>.

Is it possible to do? And if so, what am I doing wrong?
I've searched the forum and googled around for some time, but haven't found anything yet.