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;
    }

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

Answer 1

添加：

line-height: 110%;

到span 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;

Answer 2

我不确定你想要什么。但是，如果你不介意填充，你可以在跨度上添加填充顶部，它会消耗空间：

span { 
     width:100px;
     background:blue;
     font-size:30px;
     color:white; 
     text-align:center;
     padding-top:1px;
}

li{
    width:20px;
}

当我有一个固定宽度的html时，缩小差距

2 个答案: