导航栏前面有0个空格

Question

我刚开始进行navbar，并且第一个项目之前有一个空格，我无法删除它。我尝试在margin上使用padding 0和.navbar a 0，但无效

我确定我缺少某些东西：D

.navbar {
  list-style-type: none;
  background-color: black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  height: 50px;
}

.navbar a {
  text-decoration: none;
  color: gray;
  padding: 17px;
  transition: background-color 0.5s linear;
}

.navbar a:hover {
  background-color: green;
  color: honeydew;
}

body {
  margin: 0;
}

<header>
  <nav>
    <ul class='navbar'>
      <li><a href='#home'>Home</a></li>
      <li><a href='#download'>Download</a></li>
      <li><a href='#register'>Register</a></li>
      <li><a href='#contact'>Contact</a></li>
      <li><a href='#FAQ'>FAQ</a></li>
    </ul>
  </nav>
</header>

Answer 1

标签ul具有填充，在您的情况下，将padding: 0;添加到.navbar

.navbar {
  list-style-type: none;
  background-color: black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  height: 50px;
  padding: 0;
}

.navbar a {
  text-decoration: none;
  color: gray;
  padding: 17px;
  transition: background-color 0.5s linear;
}

.navbar a:hover {
  background-color: green;
  color: honeydew;
}

body {
  margin: 0;
}

<header>
  <nav>
    <ul class='navbar'>
      <li><a href='#home'>Home</a></li>
      <li><a href='#download'>Download</a></li>
      <li><a href='#register'>Register</a></li>
      <li><a href='#contact'>Contact</a></li>
      <li><a href='#FAQ'>FAQ</a></li>
    </ul>
  </nav>
</header>

Answer 2

html中的

ul元素自然会将padding-left css规则设置为40px。由于您的.navbar实际上是ul元素，因此您必须将其删除：

.navbar {
    list-style-type: none;
    background-color: black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    height: 50px;
    padding-left: 0;    /* <-- Reset padding-left from ul */
}

.navbar a {
    text-decoration: none;
    color: gray;
    padding: 17px;
    transition: background-color 0.5s linear;
}

.navbar a:hover {
    background-color: green;
    color: honeydew;
}

body {
    margin: 0;
}

<header>
    <nav>
        <ul class='navbar'>
            <li><a href='#home'>Home</a></li>
            <li><a href='#download'>Download</a></li>
            <li><a href='#register'>Register</a></li>
            <li><a href='#contact'>Contact</a></li>
            <li><a href='#FAQ'>FAQ</a></li>
        </ul>
    </nav>
</header>

Answer 3

以您的样式将padding: 0;添加到.navbar。

该空间由ul元素而不是li元素创建。

.navbar {
  list-style-type: none;
  background-color: black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  height: 50px;
  padding: 0; /* <--- here */
}