Question about sprites

I’ve used sprites three time so far, however this new set of navigation that I designed, as you can see in the picture, the links do have gaps between each other. How do I account for those gaps in the css? margin or padding?

The other sprites I’ve done the links have been right up next to each other and I would do something like this to denote the anchors:

#nav a.home{width:75px;}
#nav a.development{width:207px;}
#nav a.webmarketing{width: 103px;}

And those widths I’d set for the anchors would basically just be right next to each other…i tried doing a margin and a padding in the code above but that really didnt work

I’m not clear on whether you want the gaps or not. Anyhow, it would be best to post your full HTML and CSS.

If you are using list items and want a space to the right of each, use something like

li {margin-right: 20px;}

I guess a margin-left could work, the padding left didnt work.

Is this the best way?

Sorry, yeah the pic I posted in the first post is how I want it too look

That’s still not very clear. Post your HTML and full CSS. Does the picture show the unhovered state at the top and hovered state at the bottom?

yes, ok let me work on getting my mark up on here

Just use a margins as Ralph said at the start.

Size each link to match the state of the hovered link and then space them out with margins.

It should be straight forward :slight_smile: