Question

我尝试过负利润和其他黑客但据我所知，首先应该没有任何利润。只需一个简单的盒子，我可以在标签之间获得零边距，但不知何故，外面的东西正在弄乱它。

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

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

Answer 1

你在html（标签包含 t er）或css中错误拼写了类标签容器。注意html中的额外T和css选择器中缺少的

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

你使用.tag-container而不是tag-containter类。

Answer 3

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

奇怪的保证金出现在弹性箱中

3 个答案: