列表中边框之间的间距

Question

我需要列表的边框在屏幕上这样显示，我无法在边框底部和右边框之间放置白色间距。

这是我的代码：https://jsfiddle.net/w1n72hkx/3/

HTML：

<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>

CSS：

.barraDatosSociales {
  border: solid;
  border-top: none;
  border-right: none;
  margin-right: 3%;
  border-color: DarkTurquoise;
}
.barraDatosSociales li {
  display: inline;
  padding-right: 5px;
  border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
  border-right: solid;
  border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
  padding-left: 5px;
}

在这里，我附上一张图像，看起来应该像这样：

Answer 1

只需对您的li元素应用上下边距，并将其display设置为inline-block，以使边距变得重要。

.barraDatosSociales {
  border: solid;
  border-top: none;
  border-right: none;
  margin-right: 3%;
  padding: 0 5px;
  border-color: DarkTurquoise;
}

.barraDatosSociales li {
  padding-right: 5px;
  
  /*Here' what changed*/
  display: inline-block;
  margin: 5px 0;

  border-collapse: separate;
}

.barraDatosSociales li:not(:last-child) {
  border-right: solid;
  border-color: DarkTurquoise;
}

.barraDatosSociales li:not(:first-child) {
  padding-left: 5px;
}

<div>
    <ul class="barraDatosSociales">
        <li>Valoración 4,6 (267 votos)</li>
        <li>108 comentarios</li>
        <li>716 veces compartido</li>
    </ul>
</div>

Answer 2

有很多方法可以分隔内部边界：
您可以将列表项的top值设为负值，例如

.barraDatosSociales li {
  display: inline;
  padding-right: 5px;
  position: relative;
  top: -2px;
}

或者您可以在外部容器中添加一个padding-bottom

.barraDatosSociales {
  border: solid;
  border-top: none;
  border-right: none;
  margin-right: 3%;
  padding-bottom: 2px;
  border-color: DarkTurquoise;
}

Answer 3

您需要在CSS中对列表项进行一些修改。

内联元素不接受顶部/底部填充和边距。因此，尝试使用display: inline-block

.barraDatosSociales li {
  display: inline-block;
  padding: 5px 15px;
}