CODEWITHSUNDEEP
htmlcss
Garrett Johnson
Garrett Johnson

Reputation: 113

CSS - Adding padding to Anchor isn't moving image

I am stuck right now, trying to add space around my anchor tag. When I add padding, it just makes the width larger, and the background image stays in place.

What I'm trying to do is make it so when I add padding to the home anchor tag, the home image moves.

jsfiddle: http://jsfiddle.net/mwJUY/

html:

<ul id="navbar">
    <li><a id="homebutton" href=""><span>Home</span></a>
    </li>
    <li><a href="">Services</a>
    </li>
    <li><a href="">Resources</a>
    </li>
    <li><a href="">News</a>
    </li>
    <li><a href="">Clients</a>
    </li>
    <li><a href="">Association</a>
    </li>
    <li><a href="">Contact Us</a>
    </li>
</ul>

Upvotes: 0

Views: 135

Answers (3)

Yujin Wu
Yujin Wu

Reputation: 58

You can add the image inside the anchor.

<a href="blah">
    <img src="blah"/>
    <span>Home</span>
</a>

http://jsfiddle.net/mwJUY/5/

Upvotes: 0

lopa
lopa

Reputation: 474

try giving margin: 20px and try

here's the fiddle fiddle

The main reason for this is that padding creates a gap between the control boundry and its content while margin creates a distance from the parent container

when you apply padding the control size remains the same and so the background actually fits entirely. either add an image tag and source or use margin

Upvotes: 0

Barnee
Barnee

Reputation: 3389

Try to position your background image using background-position.

Example:

#homebutton {
background-position: center top;
}

The first value is the x coordinate, the second is the y coordinate.
You can use px, em or percent.

EDIT:

Updated fiddle

Upvotes: 1

Related Questions