html - 当我有一个固定宽度的 html 时关闭间隙

Question

我有这个代码:

<div id="navigation" class="blueColor">
      <ul id="TopMenu">
            <li><a  href="../src/projects.aspx">Projects<span class="subDetails blueColor">ARCHITECTURAL PROJECTS SUCH AS BUILDINGS, MASTER PLANS ETC.</span></a></li>  
            <li><a  href="../src/media.aspx">Media<span class="subDetails blueColor">DRAWINGS, PHOTOS, FILMS, NEWSPAPER CLIPPINGS ETC. THAT EXPLAIN THE \"PROJECTS\" AND CAPTURE THEIR LARGER CULTURAL BACKGROUND</span></a></li>              
      </ul>
</div>

和这个 css 样式:

    #logo #navigation
    {
        float:left;
        width: 255px;
        font:35px Arial;
    }

    #logo #navigation li span.subDetails{
      float:left;
      font:10px Arial;
      text-transform:uppercase;
      padding-top:4px;
      width:140px;
      opacity: 0.2;
    }

    ul#TopMenu{
     position:absolute;
     margin-top:6px
    }
    #logo #navigation ul:first-child{
      margin-left:55px;
    }
    #logo #navigation li{
      margin-left:0px;
      width:167px;
      float:left;
    }

如果将鼠标移到 Foo 和 Bar 这两个词上，会有 1px 的小间隙。 我想缩小这个差距，我该怎么做？

Answer 1

添加:

行高:110%；

到跨度 CSS:

span { 
    width:100px;
    background:blue;
    font-size:30px;
    color:white; 
    text-align:center;
    line-height: 110%;
}
li{
    width:20px;

}

http://jsfiddle.net/RWPNE/

编辑:我们发现真正的 HTML 与原始问题不同，因此解决方案是 margin-top: -1px;