CSS code to margin space above text Only without effecting the background?

Question

I have a class that has both a background image and text, I'm trying to figure out a way to manipulate the space above the Text Only, using the "margin" tag will change the position of the entire thing (image + text), I need to control the text only.

text-indent gives me some control over the horizontal spacing, I need something to have more control over the space above and below the text only if such thing exists.

Here's the CSS class:

.contactb { float:left; margin:0 5px 0 0; padding:0 0; background:url(images/contact_b.png) top no-repeat; display:block; width:108px; height:57px; font-family: 'hand-webfont'; color:black; font-size:17px; }

Here's the HTML code:

<li><a href="contact.html" class="contactb">Contact</a></li>

Any help would be appreciated guys.

Solution 1

What you're looking for simply 'padding'.

.myClass {
 padding-top:10px
 padding-bottom:10px;
}

Solution 2

Here's a working example of what I think you're trying to do: http://jsfiddle.net/yhV78/

The trick:

1. create one div that contains your background image (in my case, the background is the bunny)
2. create an inner div (or series of divs) that contains your content. You can position them either by adjusting the padding on the inner divs or by a combination of relative and absolute positioning.

Solution 3

The trick is to combine padding with background-origin... Though, it is supported only in CSS3 capable browsers (not in older IE versions: < IE9)

This

background-origin:border-box;

plus appropriate padding works fine for me... (The default value for background-origin is padding-box, which is the reason, padding alone doesn't work for you...)