如何删除导航栏下多余的1px空间？

Question

我的网站标题中有一个水平导航栏。我几乎完成了样式设置，但无法解决1个问题。

我在菜单下方有大约1px的间距。 （请参见“博客页面”下方的绿色小线。我发现这是由li-items上使用的float：left引起的。如果删除浮动，则会在每个浮动项目的右侧产生不必要的间距菜单项

周围没有填充或边距，我认为没有其他代码可能会引起问题。

HTML（已缩短）：

<nav id="main-nav" role="navigation" aria-label="Hoofdmenu">
    <ul id="primary-menu" class="menu" role="menubar" style="">
        <li id="menu-item-2129" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-703 current_page_item current_page_parent menu-item-2129"><a href="http://theme.test/blog/">a Blog page</a></li>
        <li id="menu-item-2100" class="menu-item menu-item-has-children menu-item-2100" aria-haspopup="true" aria-expanded="false" tabindex="0"><a>Template 2</a></li>
        <li id="menu-item-2126" class="menu-item menu-item-has-children menu-item-2126" aria-haspopup="true" aria-expanded="false" tabindex="0"><a>Template 3</a></li>
    </ul>
</nav>

CSS：

#main-nav {
    width: 100%;
    display:block;
}

#primary-menu {
    display: block;
    text-align: left;
    margin: 0;
    padding: 0;
}

li {
    line-height: 50px;
    opacity: 1;
    list-style: 0;
    display: inline-block;
    position: relative;
    float: left;
}

a {
    padding: 0 20px;
    display: block;
}

Answer 1

尝试

* {
   margin: 0;
   padding: 0;
}

在您的CSS顶部。正如hans-kong发布的，它消除了任何默认的浏览器样式表