Search code examples
htmlcsstextalignmentmargin

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

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, but 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>
Solution

  • You're simply looking for 'padding':

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