导航菜单不粘，有白色间隙[重复]

Question

您好，我正在尝试删除导航栏和标题之间的空白。但是，正文的边距和填充已设置为 0，我已经为整个文档 (*) 完成了它。 此外，我正在尝试使导航栏具有粘性。一旦滚动超过初始顶部，滚动并停留在文档顶部：0。 我已经按照在线教程进行了操作，但是没有用...

我尝试创建的网站类似于流行的 Minecraft 网站 Mineplex.com。 但是由于某种原因，标题和导航栏之间存在空白，并且导航栏没有保持粘性。

由于我非常困惑，请有人帮助或指出正确的方向。

body {
    height: 5048px;
  /*  background-color: #f1f1f1; */
    padding: 0;
    margin: 0;
}

.header--main {
    height: 300px;
background-color: purple;
}



nav {
    width: 100%;
    height: 50px;
 /*   background-image: linear-gradient(to bottom, #4c45b2, #25accf);*/
background-color: red;
    position: -webkit-sticky;
    top: 0;
}

nav ul {
    text-align: center;
    list-style-type: none;
}

nav ul li {

    display: inline-block;
}

nav ul li a {
    text-decoration: none;
    display: block;
    padding: 14px 28px;
    font-size: 16px;
    color: white;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
}

nav ul li a:active {
    background-color: white;
    color: #484848;
}

nav ul li a:hover {
    background-color: white;
    color: #484848;
}

/*Make navbar font to open sans*/

    <header>
        <div class="header--main">



        </div>
        <nav class="sticky">
            <ul>
                <li><a href=”./index.html”>Home</a></li>
                <li><a href=”#”>Registration</a> </li>
                <li> <a href=”#”>Order</a></li>
                <li> <a href=”#”>Features</a></li>
            </ul>
        </nav>
    </header>

<article>
    <section>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



    </section>


</article>

Answer 1

这可以解决您的问题，我将nav 移出您的header 并且效果很好：

https://codepen.io/eytienne/pen/WNeBYdQ

<header>
</header>
<nav class="sticky">
  <ul>
    <li><a href=”./index.html”>Home</a></li>
    <li><a href=”#”>Registration</a> </li>
    <li> <a href=”#”>Order</a></li>
    <li> <a href=”#”>Features</a></li>
  </ul>
</nav>
<article>
  <section>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  </section>

</article>

body {
  height: 5048px;
  /*  background-color: #f1f1f1; */
  padding: 0;
  margin: 0;
}

header {
  height: 300px;
  background-color: purple;
}

nav {
  width: 100%;
  height: 50px;
  background-color: red;
  position: sticky;
  top: 0;
}

nav ul {
  text-align: center;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  display: block;
  padding: 14px 28px;
  font-size: 16px;
  color: white;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
}

nav ul li a:active {
  background-color: white;
  color: #484848;
}

nav ul li a:hover {
  background-color: white;
  color: #484848;
}

/*Make navbar font to open sans*/

Answer 2

navigation 和 header 之间的边距问题是 <ul> 默认有边距。只需在 nav ul 的样式中添加 margin: 0; 即可。
您可以使用浏览器的开发人员工具轻松发现此类问题。它们会显示间距属于哪个元素。

关于粘性导航，其实有两个问题。

• Most browsers (except Safari) 需要 position: sticky，而不是 -webkit-sticky。
• position: stickydoes not work when the sticky element is inside a scrolling element（在你的情况下是<header>）。只需删除 <header> 元素即可产生所需的行为。要保留该元素，您可能还需要使其具有粘性。

---

这是一个工作版本：

body {
  height: 5048px;
  /*  background-color: #f1f1f1; */
  padding: 0;
  margin: 0;
}

.header--main {
  height: 300px;
  background-color: purple;
}

nav {
  width: 100%;
  height: 50px;
  /*   background-image: linear-gradient(to bottom, #4c45b2, #25accf);*/
  background-color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

nav ul {
  text-align: center;
  list-style-type: none;
  margin: 0;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  display: block;
  padding: 14px 28px;
  font-size: 16px;
  color: white;
  font-weight: bold;
  font-family: 'Open Sans', sans-serif;
}

nav ul li a:active {
  background-color: white;
  color: #484848;
}

nav ul li a:hover {
  background-color: white;
  color: #484848;
}


/*Make navbar font to open sans*/

<div class="header--main">



</div>
<nav class="sticky">
  <ul>
    <li><a href=”./index.html”>Home</a></li>
    <li><a href=”#”>Registration</a> </li>
    <li> <a href=”#”>Order</a></li>
    <li> <a href=”#”>Features</a></li>
  </ul>
</nav>


<article>
  <section>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



  </section>


</article>

Answer 3

你得到的差距是ul元素默认css值，即

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

所以要解决您的问题，您可以更新您的 css：

nav ul {
  text-align: center;
  list-style-type: none;
  margin: 0;
}