减少两个div之间的空间

Question

我的这种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>

最好的方法是什么？

Answer 1

在您的CSS中，添加以下内容：

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

您在html中添加的行，它的margin-bottom可以通过说-20px或您喜欢的任何其他负数来删除。

希望有帮助。