减少两个 div 之间的 space

Question

我有这种带有 span 的 div 格式：

如您所见，我们在垂直 div 之间有一些 space。我想减少 space 得到类似的东西：

我尝试了负填充和边距，但没有用。这是我的代码：

<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 中添加的行，可以通过说 -20px 或您喜欢的任何其他负数来删除它的底部边距。

希望对您有所帮助。

减少两个 div 之间的 space

decreasing the space between two divs

html

css

whitespace