フレックスボックスに奇妙なマージンが表示される

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{ 
 
\t 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{ 
 
\t width:20px; 
 
\t font-family: HelveticaNeue-Bold; 
 
\t font-size: 8px; 
 
\t font-weight: normal; 
 
\t font-style: normal; 
 
\t font-stretch: normal; 
 
\t text-align: center; 
 
\t 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セレクタに欠けています。 クラス名.tag-containterをcssとhtmlで確認してください。

タグコンテナクラスの代わりに.tag-containerを使用します。

Answer 2

.tagインライン要素である、display: inline-block;に設定されています。インライン要素間のスペースはHTMLで保持されるため、要素間にスペース（またはリターン）があると、ページ上の要素間にスペースが表示されます。 .tagボックス間のスペースを削除するには、それらの要素間の実際のスペースを削除します。

Answer 3

html（タグ付きt）またはcssのいずれかで、クラスタグコンテナのスペルを間違えてしまった。 HTML内の余分なTに気づくと、あなたが唯一の愚かなミスを犯した

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