Question

我的CSS菜单有一个奇怪的问题。链接上方有一个巨大的空间。

我尝试了从css中移除所有边距和填充设置的所有内容，但仍然没有。我可以删除额外间距的唯一方法是删除所有li。

谁能看到我做错了什么？

<div id="test_nav">
    <div id="test_subnav">
        <ul id="test_ul">
            <li><a href="#" target="">Test 1</a></li>
            <li><a href="#" target="">Test 2</a></li>

        </ul>
    </div>
    <asp:panel id="pnlUpdateDate" cssclass="UpdateDate" runat="server">Last Update: 11-26-2013</asp:panel>
</div


#test_nav
{
    text-align: left;
    padding: 5px;
    border: 1px dashed blue;
}

#pnlUpdateDate
{
    width: 200px;
    border: 1px dashed blue;
}

#test_subnav
{
    float: right;
    position: relative;
    z-index: 1000;
    padding: 0;
    border: 1px solid red;
}

#test_ul li
{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1001;
    b1order: 1px dashed orange;
}

#test_ul li ul
{
    margin-left: 0;
    padding: 0;
}

#test_ul > li
{
    float: left;
    padding: 3px; /* padding-top: 3px;  padding-bottom: 3px; */
    margin: 0 2px 0 0;
}

#test_ul > li > a, #test_ul > li > span
{
    display: block;
    padding: 4px 4px 4px 4px;
    margin: 0 3px 0 3px;
    font-size: 14px;
    font-weight: bold;
    color: black;
    text-decoration: none;
}

#test_ul > li > span
{
    cursor: default;
}

#test_ul > li:hover > a, #test_ul > li.active > a
{
    color: Red;
}

#test_ul > li:hover > a:active
{
    color: #3B96B6;
}

#test_ul > li:hover > span
{
    color: #3B96B6;
}

Answer 1

该空间属于useragent应用的ul#test_ul元素的默认边距。

您应该重置list元素上用户代理应用的默认样式表，如下所示：

ul#test_ul {
    padding: 0;
    margin: 0;
}

您可以参考 this answer 了解更多详情：

用户代理将一些默认样式应用于HTML元素。对于   例如，他们在<p>，<ul>，...元素上应用了上边距和下边距。

Google Chrome设置-webkit-margin-before: 1em;和-webkit-margin-after: 1em;。

<强> Working Demo

最好在任何作者样式表之前使用 reset 用户代理样式表来防止意外问题。

Answer 2

尝试从ul元素中删除边距和填充。

Answer 3

快速而肮脏的方式是* { padding:0; margin:0; }

您看到的是浏览器默认样式。考虑找到“重置”样式表，并始终在任何其他样式之前首先应用它。我喜欢这个：http://meyerweb.com/eric/tools/css/reset/

解决问题，而不是症状。如果不这样做，你会遇到这种情况。每个浏览器默认样式都不同。将它们全部归零是实现一致性的唯一方法。

Answer 4

看起来您需要将其添加到CSS中：

#test_ul {
    padding: 0;
    margin: 0;
}

CSS菜单上的额外间距

4 个答案: