弹性盒中出现奇怪的边距答案

【问题标题】：Strange Margin showing up in a flexbox弹性盒中出现奇怪的边距
【发布时间】：2017-05-23 00:41:49
【问题描述】：

我尝试过负边距和其他技巧，但据我所知，一开始就不应该有任何边距。只需一个简单的框，我就可以在标签之间获得零边距，但不知何故外面的东西会弄乱它。

问题在于右下角的霓虹蓝色徽章。

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

【问题讨论】：

// 不是评论 CSS 的正确方式
@oriol，它不是重复的，一个类拼写错误并且没有触发 flex，我重新打开这个问题
@GCyrillus 然后跑题了——简单的印刷错误
@Oriol 哦，是的，同意

标签： css sass flexbox

【解决方案1】：

.tag 设置为display: inline-block;，这是一个内联元素。内联元素之间的空格保留在 HTML 中，因此如果元素之间有空格（或返回），您将在页面上的元素之间看到空格。要删除.tag 框之间的空格，请删除这些元素之间的实际空格。

【讨论】：

【解决方案2】：

您在 html (tag-containter) 或 css 中拼错了类标签容器。注意 html 中额外的 T 和 css 选择器中的缺失

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

【讨论】：

【解决方案3】：

你只是犯了一个愚蠢的错误。只需在 css 和 html 中检查您的类名 .tag-containter。

您使用 .tag-container 而不是 tag-container 类。

【讨论】：