CODEWITHSUNDEEP
htmlcsswhitespace
seyet
seyet

Reputation: 1150

decreasing the space between two divs

I have this format of divs with spans:

enter image description here

As you can see we have some space between the vertical divs. I want to reduce that space to get something like: enter image description here

I tried negative padding and margin and it didn't work. Here is my code:

<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>

What's the best way to do it?

Upvotes: 0

Views: 1348

Answers (1)

Soban
Soban

Reputation: 434

In your CSS, add this:

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

The row you added inside the html, it's margin-bottom can be removed by saying -20px or any other negative number you prefer.

Hope it helps.

Upvotes: 1

Related Questions