Html 减少两个div之间的间距

我有这种带跨距的div格式：

正如你所看到的，我们在垂直div之间有一些空间。我想缩小空间，得到如下结果：

我尝试了负片填充和边距，但没有效果。这是我的密码：

<div class="container">
<div class="row" v-for="objData in data" :key="objData.label">
  <div class="column inline" style="background-color:grey;" >
    <span class="span hasan">{{objData.label}}</span>
    <span class="span">{{objData.value}}</span>
  </div>
  <div class="vl"></div>
  <div class="column inline" style="background-color:grey;">
    <span class="span hasan">{{objData.label}}</span>
    <span class="span">{{objData.value}}</span>
  </div>
</div>
</div>

<style>
.span {
  margin-left: 50px;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
.vl {
  display:inline-block;
  border-left: 1px solid grey;
  height: 50px;
  max-width: 200px;
}
.inline {
  display: inline-block;
  max-width: 49%;
  padding: 0px;
  margin: 0px;
}

.hasan {
  font-weight: bold;
}
</style>

{{objData.label}
{{objData.value}
{{objData.label}
{{objData.value}
.span{
左边距：50像素；
}
.栏目{
浮动：左；
宽度：50%；
填充：10px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.vl{
显示：内联块；
左边框：1px纯色灰色；
高度：50px；
最大宽度：200px；
}
.内联{
显示：内联块；
最大宽度：49%；
填充：0px；
边际：0px；
}
哈桑先生{
字体大小：粗体；
}

最好的方法是什么？

在CSS中，添加以下内容：

.row {
  margin-bottom: -20px;
}

您在html中添加的行，其边距底部可以通过说出-20px或您喜欢的任何其他负数来删除

---

希望有帮助。

所谓“垂直div之间的间距”，是指两列之间的间距吗？是指行之间的间距。比如在“Hasan:asdads-asdads”之间，它们相互重叠。您给出的代码只包含1行。是。我在循环一个物体。对象内的每两个数组创建一行。我们有4个数组，所以这里有2行。它工作正常，谢谢。但是现在，列之间的垂直线从卡的底部伸出。尝试给行负边距，但不起作用。你知道怎么解决吗？我不明白你说的垂直线是什么意思？