css - 出现在 flexbox 中的奇怪边距

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

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

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