在导航栏中使用p​​osition：relative时删除水平间距

I'm trying to create a php navigation bar. I've come up with a nice looking scheme using the following code:

css:

a.navbar:link    { color:#AAAAFF; text-shadow:none; 
             padding: 5px 12px; white-space:nowrap; font-size:15px;}
a.navbar:visited { color:#AAAAFF; text-shadow: #4444FF 0.0px 0.0px 2px}
a.navbar:hover   { color:#CCCCCC; background:#444488;  } 
a.navbar:active  { color:grey; }
a.navbar {padding:none; font-size:15px;}

span.leftbraces { font-size:25pt; padding: 0px 0px; 
    position:relative; right:-9px;  bottom:-3.75px;}
span.rightbraces { font-size:25pt; padding: 0px 0px; 
    position:relative; left:-9px;  bottom:-3.75px;}

php:

<?php
echo "<center>";
$links = array('Home'=>'index.htm', 'Site Map'=>'sitemap.htm');
$leftbrace = "<span class=leftbraces>[</span>";
$rightbrace = "<span class=rightbraces>]</span>";
foreach ($links as $key => $value) {
    echo "$leftbrace<a class=navbar href=\"$value\">$key</a>$rightbrace";
}
echo "</center>";
?>

and html:

<html>
<link rel="stylesheet" type="text/css" href="style.css">
<?php include 'navbar.test.php';?>
</html>

How can I eliminate the space between the braces without giving up the nice tightly-fitting background padding? The <table> tag I've included is not necessary, it was just my latest attempt to get this to work.

screenshot showing spacing issue

[ Home ] I want to get rid of this space [ Site Map ]

screenshot showing highlighting

but I want to keep the tight fit of the highlighting

Here is a better way of doing it:

The list of links in your navigation is just that— a list. Instead of using a table, use ul, or unordered list. In my example, I also used the nav element, which is HTML5. You could easily replace it with a div.

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Site Map</a></li>
</ul>

Notice, I did not include the brackets in the markup. This is on purpose. Those brackets do not add to the content or meaning of the site, and should be in the domain of CSS.

This is easily done with pseudo elements:

nav a:before {content:'['; display:inline;}
nav a:after {content:']'; display:inline;}

You will lose some support with older versions of IE, but everyone, including IE users—and especially those using screen readers or with other accessibility issues—will benefit from the removal of superfluous spans. It will also degrade gracefully.

Here is a demo.

Remove the padding on the "navbar" element and the negative bounds on the braces. Like so: http://jsfiddle.net/kDq29/1/.

Also note the errors in your HTML markup.

EDIT: I forgot to save my changes from chrome. Updated now.

The '] Space [' was caused by left, right, bottom property of braces.

span.leftbraces { font-size:25pt; padding: 0px 0px; 
    position:relative; right:-9px;  bottom:-3.75px;}
span.rightbraces { font-size:25pt; padding: 0px 0px; 
    position:relative; left:-9px;  bottom:-3.75px;}

Remove the position properties and align the text by its only property. - visit : http://jsfiddle.net/fPty7/1

You could wrap [ Home ] and [ Site Map ] in a span. Set the margin of this wrapper to -8px.

http://jsfiddle.net/wkS6H/

Side note: Since you are displaying static content echo is inefficient. It causes the server to reproduce the same output every page request.