small tag wraps on to another line and overlaps the top

[cyberpunkstudio]

Hi I have a small tag with some text and anchor tags
HTML code:

<small>July 12th, in 
<a href="" title="View all posts in Inking" rel="category tag">Inking</a>, 
<a href="" title="View all posts in Interview" rel="category tag">Interview</a>, 
<a href="" title="View all posts in News" rel="category tag">News</a>, 
<a href="" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a>, 
 <a href="" title="View all posts in testing" rel="category tag">testing</a> 
by <a href="" title="Posts by Craig Davidson">Craig Davidson</a></small> 

with the css style:

small {
margin:0 0 9px 0;
padding:6px 12px 5px 8px;
font-size:1.1em;
color:#fff;
background-color:#2b6dc6;
}
small a {
color:#fff;
text-decoration:underline;
line-height:1.2em;
}

Because the text is long the small tag wraps on to a second line and the background and anchor tag over laps the top. How do I make so it doesn't do so?

I don't want to use display block as this extends the background all the way to the end of the div which stretches out the whole thing. I tried using line-height but it makes it look bit strange.

Hope you can help, thank you

[dreamcatcher]

I think display:block is the way to go. Can`t you set the display to block and then set a width for the block?

dc