I have tried negative margins and other hacks but as far as i know, there shouldn't be any margins there in the first place. With just a simple box i can get zero margins between the tags but somehow the stuff outside that is messing with it.
The problem is with the neon blue badges in the bottom right corner.
.info{
display: flex;
flex-direction: row;
// justify-content: space-between;
}
.column {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 48%;
min-height: 61.9px;
// background-color: #00ffff;
display: flex;
flex-direction: column;
}
.info-block{
display: flex;
flex-direction: column;
}
.spacer{
height:14.7px;
width: 1px;
}
.tag{
line-height: 0;
display:inline-block;
height: 15.8px;
width:40px;
padding-right: 4px;
padding-left: 4px;
padding-top: 2px;
background-color: #00ffff;
border-radius: 4px;
}
.tag-container{
line-height: 0;
width: 168px;
height:78px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.tag-text{
width:20px;
font-family: HelveticaNeue-Bold;
font-size: 8px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
text-align: center;
color: #ffffff;
}
<div class="info">
<div class="column">
<div class="info-block">
<div class="info-header">Location</div>
<div class="info-text">place</div>
</div>
<div class="spacer"></div>
<div class="info-block">
<div class="info-header">Mobile</div>
<div class="info-text">+44 (0) 788-588</div>
</div>
</div>
<div class="column">
<div class="info-block">
<div class="info-header">Menu</div>
<div class="info-text"><a>bk.com</a></div>
</div>
<div class="spacer"></div>
<div class="info-block ">
<div class="info-header">Tags</div>
<div class="tag-containter">
<div class="tag"><div class="tag-text">h</div></div>
<div class="tag"><div class="tag-text">Som</div></div>
<div class="tag"><div class="tag-text">Somethg</div></div>
<div class="tag">
<div class="tag-text">ng</div>
</div>
<div class="tag">
<div class="tag-text">Somhing</div>
</div>
</div>
</div>
</div>
//
is not a correct way to comment CSS