Html 如何在边框线和菜单项之间添加空格

我试图在底部边框线和我的

项目之间添加空格，但运气不好

我的代码：

<div class="menuwrap">
    <div class="menu">
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">Query</a>
            </li>
            <li><a href="#">Reports</a>
            </li>
        </ul>
    </div>
</div>

---

我尝试了两种不同的方法，但到目前为止没有任何效果。边界间距不是我想要的。我试着填充底部，但也不起作用。有人能告诉我如何做到这一点吗？我想在“li”项及其边框底部之间留一个空格。

添加填充底部或边距底部似乎有效

li:悬停{
垫底：10px；
}

这里有一个

或

li:悬停{
边缘底部：10px；
}

这里有一个

更新：在阅读了您的评论并查看了您提供的小提琴之后，我创建了一个可以完成您尝试的操作的小提琴。它与您提供的代码不同，但更易于阅读，您可以根据需要进行修改

菜单{
列表样式类型：无；
}
李先生{
显示：内联块；
*显示：内联；
缩放：1；
利润率：10px；
}
.菜单李a{
文字装饰：无；
颜色：#000；
边框底部：2倍实心#000；
填充底部：30px；
}
.菜单a:悬停{
字号：2em；
字体大小：粗体；
}

---

我猜你没有给出你的风格<代码>填充底部有效。请检查

您希望空间始终保持不变，还是只悬停？在我的测试中，填充底部可以向下推边界-您可以创建一个JSFIDLE并准确解释您想要实现的目标吗。您尝试了什么代码？错误是什么？我希望它只在悬停状态下运行。Smokey，就像在本例中一样，如果它在菜单li上，它可以正常工作，但如果我在a:hover上创建填充底部，它就不起作用。@jennasalva检查我更新的答案。我的错误是，我没有指定在使用a:hover时出现问题