在导航菜单中的每个 link 下创建垂直空间？

Question

我正在制作一个左侧有导航菜单的网站，我想在每个 link 下创建 space 因为现在 link 太靠近彼此并没有谷歌搜索帮助，因为所有解决方案都是针对彼此相邻的 link 的，但我的菜单就像一个列表，所以我需要垂直 space、space 在每个 link 不在每个 link 旁边！！！提前谢谢你。

请详细解释一下，我对此很陌生。

编码：

<aside>
<nav> 
<ul>
<li>
<a href="#.html" class="button">NAME</a></li>
<li>
<a href="#.html" class="button">NAME</a></li>
<li>
<a href="#.html" class="button">NAME</a></li>
<li>
<a href="#.html" class="button">NAME</a></li>
<li>
<a href="#.html" class="button">NAME</a></li>
<li>
<a href="#.html" class="button">NAME</a></li>
</ul>
</nav>
</aside>

AND CSS:

aside {
    overflow:hidden;
    display: inline-block; 
    background-color: #E3D6C8;

}
nav ul  {
    list-style-type: none;
}
nav {
    float: left; 
    padding: 10px;
    padding-bottom: 130px; 
    padding-right: 35px;
}
a {
    text-decoration: none;
    color: white;
}
a.button,div.container {
    float:left;
}
a.button {
    background-color: #FFB000;
    border: 1px solid;
    border-radius: 7px;
    margin-right: 5px;
    padding:5px 5px 5px 5px;
}

Answer 1

要进一步降低 link，您可以在每个 link 之间放置填充。这是使用填充的方法：

aside {
    overflow:hidden;
    display: inline-block; 
    background-color: #E3D6C8;

}
nav ul  {
    list-style-type: none;
}
li  {
    padding: 15px 0px 15px 0px;
}
nav {
    float: left; 
    padding: 10px;
    padding-bottom: 130px; 
    padding-right: 35px;
}
a {
    text-decoration: none;
    color: white;
}
a.button,div.container {
    float:left;
}
a.button {
    background-color: #FFB000;
    border: 1px solid;
    border-radius: 7px;
    margin-right: 5px;
    padding:5px 5px 5px 5px;

<aside>
  <nav> 
    <ul>
      <li>
        <a href="#.html" class="button">NAME</a></li><br/>
      <li>
        <a href="#.html" class="button">NAME</a></li><br/>
      <li>
        <a href="#.html" class="button">NAME</a></li><br/>
      <li>
        <a href="#.html" class="button">NAME</a></li><br/>
      <li>
        <a href="#.html" class="button">NAME</a></li><br/>
      <li>
        <a href="#.html" class="button">NAME</a></li>
    </ul>
  </nav>
</aside>

如果您想要在顶部和底部之间增加或减少 space，请将数字 15 更改为您想要的任何值。

在导航菜单中的每个 link 下创建垂直空间？

Create VERTICAL spaces under each link in a navigation menu?

html

css

navigation

menu

sidebar