页面开头和第一个 div 之间不需要的空间 [重复]答案

【问题标题】：Unwanted space between page beginning and first div [duplicate]页面开头和第一个 div 之间不需要的空间 [重复]
【发布时间】：2018-03-14 20:33:12
【问题描述】：

我想在我的 HTML 文档中添加一个导航栏。我创建了一个带有无序列表和列表项的 Div。列表应居中，列表项应并排。

正如您在随附的屏幕截图中所见，它看起来完全符合我的要求，除了导航栏上方不需要的空白。

当我删除“navbar-links li”的 CSS 属性时它会消失，但前提是我删除它的每个属性。

    .navbar {
    background-color: rgb(50, 50, 50);
    min-height: 70px;
}

.navbar-links {
    color: white;
    margin-left: auto;
    margin-right: auto;
}

.navbar-links li {
    list-style-type: none;
    float: left;
    margin-left: 50px;
    margin-top: 22px;
}

<html>
<body>
<nav class="navbar">
    <div class="container">
        <ul class="navbar-links">
            <li>HOME</li>
            <li>SERVICES</li>
            <li>OUR WORK</li>
            <li>ABOUT US</li>
            <li>CONTACT</li>
            <li>BOOK ONLINE</li>
        </ul>
    </div>
</nav>
</body>
<html>

它的样子：

如何删除空白？

【问题讨论】：

你在使用 CSS 重置吗？
试试 .navbar-links{ margin-top : -22px} 因为 ul > li 有 margin-top 22px

标签： html css

【解决方案1】：

body{margin:0;}
ul{margin:0;}

.navbar {
    background-color: rgb(50, 50, 50);
    min-height: 70px;
}

.navbar-links {
    color: white;
    margin-left: auto;
    margin-right: auto;
}

.navbar-links li {
    list-style-type: none;
    float: left;
    margin-left: 50px;
    margin-top: 22px;
}

<nav class="navbar">
    <div class="container">
        <ul class="navbar-links">
            <li>HOME</li>
            <li>SERVICES</li>
            <li>OUR WORK</li>
            <li>ABOUT US</li>
            <li>CONTACT</li>
            <li>BOOK ONLINE</li>
        </ul>
    </div>
</nav>

【讨论】：