CSS 菜单上的额外间距答案

【问题标题】：Extra spacing on CSS MenuCSS 菜单上的额外间距
【发布时间】：2014-03-31 09:59:34
【问题描述】：

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

【问题讨论】：

查看我的答案以避免将来出现此类问题。

标签： css menu alignment padding

【解决方案1】：

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

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

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

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

用户代理将一些默认样式应用于 HTML 元素。为了例如，它们在 <p>、<ul>、... 元素上应用顶部和底部边距。

由于谷歌浏览器设置了-webkit-margin-before: 1em; 和-webkit-margin-after: 1em;。

Working Demo

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

【讨论】：

有什么理由指定元素类型和 ID？
@ZachSaucier 只是为了将 OP 定向到某个元素。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

解决问题，而不是症状。如果你不这样做，你会一直遇到这个问题。每个浏览器的 default 样式都不同。将它们全部归零是始终保持一致性的唯一方法。

【讨论】：

【解决方案4】：

您似乎需要将此添加到您的 CSS 中：

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

【讨论】：