html - 如何在它们之间留出空间？

Question

我尝试制作一个页脚菜单，类似于此站点:pentlandfirth.com/de。当我将鼠标悬停在链接上时，它有一个背景，但它位于边框的边缘。我怎样才能在它们之间留出空间？ https://jsfiddle.net/13w3rmat/3/

    #fa{
  width: 600px;
  padding: 20px;
  display: inline-block;
}

#fa ul{
  list-style-type: none;
}

#fa ul li{
  float: left;
  width: 20%;
  margin-right: 2%;
  padding-left: 3%;
  border-right: 1px solid #989;
}

#fa ul li:last-child{
  border: none;
  margin: 0;
}

#fa ul li a{
  text-decoration: none;
  display: block;
  padding-bottom: 10px;
  color: #000;
}

    #fa ul li a:hover{
  color: #f00;
  background: gray;
  border-radius:5px;
  padding-right: 13px

              <div id="fa">
  <ul>
    <li>
      <a href="#">Test</a>
      <a href="#">Test</a>
      <a href="#">Test</a>
    </li>
    <li>
      <a href="#">Test</a>
      <a href="#">Test</a>
      <a href="#">Test</a>
    </li>
    <li>
      <a href="#">Test</a>
      <a href="#">Test</a>
      <a href="#">Test</a>
    </li>
  </ul>

</div>

Answer 1

这是一个demo.

在 a 标签中添加一点 padding:

a {
    padding: 10px;
}

但最好给 a 一个类，然后向该类添加填充。