Geek Answers Handbook

CSS in markup field above text Only without background effect?

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

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 a 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 is the HTML code:

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

Any help would be appreciated by the guys.

+4
source share
3 answers

What you are looking for is just indentation.

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

Here is a working example of what I think you are trying to do: http://jsfiddle.net/yhV78/

Trick:

  • create one div containing the background image (in my case the background is a rabbit)
  • create an inner div (or series of divs) containing your content. You can arrange them either by adjusting the indentation on the inner divs, or by a combination of relative and absolute positioning.
+1
source

The trick is to combine the add-on with background-origin ... Although it is only supported in browsers that support CSS3 (not in older versions of IE: <IE9)

it

background-origin: box border;

plus a suitable add-on works fine for me ... (The default for background-origin is the padding-box, which is the reason, only one add-on does not work for you ...)

+1
source

More articles:


All Articles