Css 设计一个有序列表，其边框正好位于两个li元素的中间

我设计了以下列表。现在我想保持它的精确外观，但在li元素之间留出更多空间。不幸的是，“填充底部”移动边界底部的方式，它不停留在中间之间的两个元素，但底部的胶粘，因为它应该这样做，我看到了。但我想把它放在两个嵌套的Li元素中间。现在我被卡住了。我知道我可能会弄乱html源代码，但我更希望保持它的整洁，只使用CSS。有人能给我指个地方吗？谢谢

   <div id="list">
  <ul>
    <li><a href="#">No hacemos uso de cualquier de los componentes prefabricados o mezclas preparadas.</a></li>
    <li><a href="#">Una alta calidad en la compra de los ingredientes y la preparación es nuestra principal prioridad. </a></li>
    <li><a href="#">Todos nuestros productos se hacen con amor y se han inspirado en recetas familiares.</a></li>
    <li><a href="#">Punto tres</a></li>
    <li><a href="#">Queremos que nuestros clientes estén satisfechos. Si alguna vez tiene motivo de queja, le pedimos que nos devuelva su compra tan pronto como sea posible en nuestra tienda.</a></li>
  </ul>
</div>

    #list {
      width: 100%;
      margin: 30px;
      text-align:center;
    }

    #list ul {
      list-style-type: none;
      margin: 0;
      padding-bottom: 0;
    }

    #list ul li {
      font: 200 14px/1.5 'oswaldlight';
      border-bottom: 1px solid #ccc;
    }

    #list ul li:last-child {
      border: none;
    }

    #list li a {
      text-decoration: none;
      color: #000;
      text-align:center;

      -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
      -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
      -o-transition: font-size 0.3s ease, background-color 0.3s ease;
      -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
      transition: font-size 0.3s ease, background-color 0.3s ease;
      display: block;
      width: 100%;
    }

    #list li a:hover {
      font-size: 30px;
      background: #f6f6f6;
    }

#名单{
宽度：100%；
利润率：30像素；
文本对齐：居中；
}
#列表ul{
列表样式类型：无；
保证金：0；
填充底部：0；
}
#李国宝{
字体：200 14px/1.5“oswaldlight”；
边框底部：1px实心#ccc；
}
#李：最后一个孩子{
边界：无；
}
#李娜{
文字装饰：无；
颜色：#000；
文本对齐：居中；
-webkit过渡：字体大小0.3s轻松，背景色0.3s轻松；
-moz过渡：字体大小0.3s轻松，背景色0.3s轻松；
-o过渡：字体大小0.3s，背景色0.3s；
-ms过渡：字体大小0.3s轻松，背景色0.3s轻松；
过渡：字体大小0.3s轻松，背景色0.3s轻松；
显示：块；
宽度：100%；
}
#列表a：悬停{
字体大小：30px；
背景：#f6f6f6；
}

您可以在

填充顶部

和

填充底部

之间分割值

#list ul li {
    padding:2px 0;
}

---

在 Li 元素的顶部和底部都有一个2px填充，将边界保持在中间而不是粘在底部。

< P> <强> HTML：

 <div id="list">
    <ul>
       <li><a href="#">No hacemos uso de cualquier de los componentes prefabricados o mezclas preparadas.</a></li>
       <li><a href="#">Una alta calidad en la compra de los ingredientes y la preparación es nuestra principal prioridad. </a></li>
       <li><a href="#">Todos nuestros productos se hacen con amor y se han inspirado en recetas familiares.</a></li>
       <li><a href="#">Punto tres</a></li>
       <li><a href="#">Queremos que nuestros clientes estén satisfechos. Si alguna vez tiene motivo de queja, le pedimos que nos devuelva su compra tan pronto como sea posible en nuestra tienda.</a></li>
    </ul>
</div>

---

我想这会解决你的问题。

这是显而易见的。谢谢，先生。我应该看看这个。我是如此专注于思考，以至于我没有注意以这种方式触发边界。非常感谢@MichaelSchwark没问题！

 #list {
      width: 100%;
      margin: 30px;
      text-align:center;
    }

    #list ul {
      list-style-type: none;
      margin: 0;
      padding-bottom: 0;
    }

    #list ul li {
      font: 200 14px/1.5 'oswaldlight';
      border-bottom: 1px solid #ccc;
      padding: 5px 0px;
    }

    #list ul li:last-child {
      border: none;
    }


    #list li a {
      text-decoration: none;
      color: #000;
      text-align:center;

      -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
      -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
      -o-transition: font-size 0.3s ease, background-color 0.3s ease;
      -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
      transition: font-size 0.3s ease, background-color 0.3s ease;
      display: block;
      width: 100%;
    }

    #list li a:hover {
      font-size: 30px;
      background: #f6f6f6;
    }