左右间隙的边界

Question

当我对'a'元素应用填充时，顶部和底部之间将有间隙。我希望顶部边框覆盖整行直到navbar的右侧边框。我该如何解决这个问题。

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 6fr;
}

.navbar {
  border-right: gray 3px solid;
  padding: 5%;
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  min-width: 300px;
}

#navbar-header {
  text-align: center;
  margin-bottom: 20px;
}

#navbar-content a {
  text-decoration: none;
  color: black;
}

#navbar-content a li {
  list-style: none;
  padding: 5%;
  padding-left: 10%;
  border-top: gray 1px solid;
}

<div class="wrapper">
  <div class="navbar">
    <h2 id="navbar-header">JS Documentation</h2>
    <ul id="navbar-content">
      <a href="#intro">
        <li>Introduction</li>
      </a>
      <a href="#know">
        <li>What you should already know</li>
      </a>
      <a href="#js-java">
        <li>JavaScript and Java</li>
      </a>
      <a href="#hello">
        <li>Hello World</li>
      </a>
      <a href="#var">
        <li>Variables</li>
      </a>
      <a href="#dec-var">
        <li>Declaring Variables</li>
      </a>
      <a href="#var-sco">
        <li>Variable Scope</li>
      </a>
      <a href="#glo-var">
        <li>Global Variables</li>
      </a>
      <a href="#cons">
        <li>Constants</li>
      </a>
      <a href="#data">
        <li>Data Types</li>
      </a>
      <a href="#if-else">
        <li>if...else statement</li>
      </a>
      <a href="#while">
        <li>while statement</li>
      </a>
      <a href="#func">
        <li>Function declarations</li>
      </a>
      <a href="#ref">
        <li>Reference</li>
      </a>
    </ul>
  </div>
  <div class="contents">

  </div>
</div>

当我对'a'元素应用填充时，顶部和底部之间将有间隙。我希望顶部边框覆盖整行直到navbar的右侧边框。我该如何解决这个问题。

Answer 1

从导航栏中删除左/右填充并增加li之一：

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 6fr;
}

.navbar {
  border-right: gray 3px solid;
  padding: 5% 0; /*updated*/
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  min-width: 300px;
}

#navbar-header {
  text-align: center;
  margin-bottom: 20px;
}

#navbar-content a {
  text-decoration: none;
  color: black;
}

#navbar-content a li {
  list-style: none;
  padding: 5% 10%; /*updated*/
  border-top: gray 1px solid;
}

<div class="wrapper">
  <div class="navbar">
    <h2 id="navbar-header">JS Documentation</h2>
    <ul id="navbar-content">
      <a href="#intro">
        <li>Introduction</li>
      </a>
      <a href="#know">
        <li>What you should already know</li>
      </a>
      <a href="#js-java">
        <li>JavaScript and Java</li>
      </a>
      <a href="#hello">
        <li>Hello World</li>
      </a>
      <a href="#var">
        <li>Variables</li>
      </a>
      <a href="#dec-var">
        <li>Declaring Variables</li>
      </a>
      <a href="#var-sco">
        <li>Variable Scope</li>
      </a>
      <a href="#glo-var">
        <li>Global Variables</li>
      </a>
      <a href="#cons">
        <li>Constants</li>
      </a>
      <a href="#data">
        <li>Data Types</li>
      </a>
      <a href="#if-else">
        <li>if...else statement</li>
      </a>
      <a href="#while">
        <li>while statement</li>
      </a>
      <a href="#func">
        <li>Function declarations</li>
      </a>
      <a href="#ref">
        <li>Reference</li>
      </a>
    </ul>
  </div>
  <div class="contents">

  </div>
</div>