Html 边缘底部不工作

是什么阻止了保证金底线在这里发挥作用？

我只想让激活的一个在空中跳跃大约10px。

可能使用：

#navigation ul#links li a.active{color:#1161A5;position:relative;top:-10px;}

---

（因为在内联元素上）

我可以想象边距底部不会将内容向上推，而只会将其他内容向下推

你试过摆弄姿势吗？尝试将位置：相对于

和位置：绝对添加到标记，但仅添加活动链接。然后，您可以这样在CSS中引用它

li{位置：相对；} a:悬停{位置：绝对；顶部：-10px；}

---

我还没有测试过任何东西，所以别逼我！！哈!

确定，在列表项的内部元素周围添加一个范围，如下所示：

<div id="navigation"> 
    <ul id="links"> 
        <li><a href="index.html"><span>Home</span></a></li> 
        <li><a class="active" href="projects.html"><span>Projects</span></a></li> 
        <li><a href="whyme.html"><span>Why Me?</span></a></li> 
        <li><a href="contact.html"><span>Contact</span></a></li> 
    </ul> 
</div>

这个怎么样：

CSS HTML

虽然这样做了，但它也会将边框向左上移动。我不认为有办法使文本“高于”其边框，是吗？不在同一元素中是不可能的。根据我的扩展答案添加额外的span元素可以解决这个问题。我想知道一种无边框向上移动文本的方法，但这似乎是不可能的…这非常有效。。。旁注有没有办法减小边框的大小？@Maletor在#导航ul#链接li a其边框左侧：2px实心#1161A5；将其更改为左边框：1px实心#1161A5@索提里斯。。。这难道不会改变边界的宽度吗？我想Maletor的意思是它的高度。。。如果我错了，请更正。可以添加显示：块；高度：whateverpx；进入"导航ul"链接李一宣言。这不是最优雅的管理方式，但我马上想到的就是它。@Hristo我想他只是想改变边界宽度。高度未在css上设置，因此它从浏览器获取自动值。如果我理解错了，Maletor可以纠正我

#navigation ul#links li a.active{color:#1161A5; }
#navigation ul#links li a.active span { position: relative; top: -10px; }
#navigation ul#links li a{ font-family:LeagueGothicRegular;color:#ADC060;text-decoration:none;padding-left:10px;border-left:2px solid #1161A5;}
#navigation ul#links li a:hover,#navigation li:active{color:#1161A5;}
#navigation ul#links li:first-child a{border-left:none;}
#navigation ul#links li{float:left;font-size:1.5em;margin-left:10px;}

#navigation ul#links li{
    padding-left:10px;
    border-left:2px solid #1161A5;
    float:left;
    font-size:1.5em;
    margin-left:10px;
}

#navigation ul#links li a{
    font-family:LeagueGothicRegular;
    color:#ADC060;
    text-decoration:none;
}

#navigation ul#links li a.active{
    color:#1161A5;
    position: relative;
    bottom: 10px;
}

#navigation ul#links li a:hover {
    color:#1161A5;
}

#navigation ul#links li:first-child {
    border-left: 0px;
}

<div id="navigation">
    <ul id="links">
        <li><a href="index.html">Home</a></li>
        <li><a class="active" href="projects.html">Projects</a></li>
        <li><a href="whyme.html">Why Me?</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>