0

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>

4
  • 1
    // is not a correct way to comment CSS
    – G-Cyrillus
    Jan 8, 2017 at 18:49
  • @oriol, it is not a duplicate, a class is mispeled and flex not triggered , i reopen the question
    – G-Cyrillus
    Jan 8, 2017 at 18:58
  • @GCyrillus Then it's off-topic - simple typographical error
    – Oriol
    Jan 8, 2017 at 19:00
  • @Oriol oh yes, agreed
    – G-Cyrillus
    Jan 8, 2017 at 19:24

3 Answers 3

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.

1

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>

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.