How to remove 4 pixel padding after a word?

In the above picture there is a 4 pixel padding after the word Contact and when not selected it looks like there is a 5 pixel padding between the divider and feedback and a 9 pixel padding between contact and the divider. How can I get rid of those 4 pixels after Contact?

Edit: Here's some code.

.vdivider {
    width: 1px;
    height: 10px;
    border-left: 1px solid #666666;
    margi开发者_如何学Gon: 0px 5px;
}

<div id="footer">
    <a href="contact.php">Contact</a>
    <span class="vdivider"></span>
    <a href="feedback.php">Site Feedback</a>
</div>

Seeing your code would help tremendously, but I think I can guess what the issue is without it.

You are using padding-right to separate list items, and are using a 1px border as a separator. The problem with this technique is white space insertion. If you remove all white space from your list, this will be solved. So either format your code like this:

<ul>
    <li>Contact</li><li>Site Feedback</li><li>Another Example</li>
</ul>

Or like this:

<ul>
    <li>Contact</li><!-- prevent white space insertion
    --><li>Site Feedback</li><!-- prevent white space insertion
    --><li>Another Example</li>
</ul>

EDIT: After seeing your code, I would suggest refactoring your code to the much more semantic version: an inline list. Again, this is just a suggestion. Let me know if you want more details on creating this effect using inline lists and I'll post working code for you.

EDIT2: http://jsfiddle.net/EqSBT/1/