Strange Margin showing up in a flexbox

Question

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>

@oriol, it is not a duplicate, a class is mispeled and flex not triggered , i reopen the question — G-Cyrillus, Jan 08 '17 at 18:58

score 1 · Answer 1 · answered Jan 08 '17 at 18:58

you mispelled the class tag-container either in the html (tag-containter) or in the css . notice the extra T in html and missing in css selector

.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;
  height: 15.8px;
  width: 40px;
  padding-right: 4px;
  padding-left: 4px;
  padding-top: 2px;
  background-color: #00ffff;
  border-radius: 4px;
}
.tag-containter {
  width: 168px;
  height: 78px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
}
.tag-text {
  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>

score 1 · Accepted Answer · answered Jan 08 '17 at 19:09

1

You only made a silly mistake. Just check your class name .tag-containter in css and html.

you use .tag-container instead of tag-containter class.

answered Jan 08 '17 at 19:09

Ajay

186
2
12

score 0 · Answer 3 · answered Jan 08 '17 at 18:50

.tag is set to display: inline-block;, which is an inline element. Spaces between inline elements are preserved in HTML, so if you have spaces (or returns) between the elements, you will see a space between the elements on the page. To remove the spaces between the .tag boxes, remove the actual spaces between those elements.

Strange Margin showing up in a flexbox

3 Answers3