7

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>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
user1594603
  • 171
  • 2
  • 5
  • 11
  • 1
    please include the relevant HTML and CSS so that we can have a better understanding of the question. That said, have you tried using `padding` instead of `margin`? – jackwanders Aug 16 '12 at 19:10
  • I added both, thanks for replying. Maybe there's something wrong with my code (still a beginner here), but margin and padding both effect the background image as well which messes up the layout, I need to control the text alone. – user1594603 Aug 16 '12 at 19:24

3 Answers3

7

You're simply looking for 'padding':

.myClass {
    padding-top: 10px
    padding-bottom: 10px;
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Billy Moat
  • 20,792
  • 7
  • 45
  • 37
  • Thanks for replying, in my case the padding also effects the entire image as well which messes up my layout, I'll add the code in the question now. – user1594603 Aug 16 '12 at 19:18
  • @jos - any padding you add to the top or bottom must be subtracted from the height you have set on the 'a' tab. THis is how the box model works in CSS. so if you set padding-top:10px and you have your height set to 57px you should reduce your height to be 47px. This theory alos applies to the width of an element of you're setting left/right padding. – Billy Moat Aug 16 '12 at 21:05
  • Thanks a lot for the explanation man, the height thing was what confused me and adjusting its value solved the issue. I can't vote up your answer since I don't have enough reps but I sure will accept it now, thank you! – user1594603 Aug 17 '12 at 00:13
1

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.
Cynthia
  • 5,273
  • 13
  • 42
  • 71
  • I'm trying to do this for an unordered list, I think creating a div for each will only confuse me more and make it over complicated, but the idea might be useful to me for something else, thanks for replying. – user1594603 Aug 17 '12 at 00:15
1

The trick is to combine padding with background-origin... Though, it is supported only in CSS 3 capable browsers (not in older Internet Explorer versions: before Internet Explorer 9)

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...)

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Jan Hnila
  • 146
  • 2
  • 3