マージンボーダーとパディングを0に設定しました。エレメント間にスペースがあるのはなぜですか？

Question

赤い四角形の間にスペースを入れたくないので、関連するすべてのプロパティがゼロであることを確認しました。マージン、パディング、および境界です。しかし、まだスペースがあります。どうして？どうすれば修正できますか？

.outer { 
 
    height: 100px; 
 
    width: 600px; 
 
    background-color: grey; 
 
} 
 
.bar { 
 
    background-color: red; 
 
    height: 20px; 
 
    width: 45%; 
 
    display: inline-block; 
 
    margin-top: 20px; 
 
}

<div class="outer"> 
 
    <span></span> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
</div>

Answer 1

スペースは改行から来ています。フローティング要素を使用するか、2つのdiv要素の間に空白を削除し、次のいずれか

.outer { 
 
    height: 100px; 
 
    width: 600px; 
 
    background-color: grey; 
 
} 
 
.bar { 
 
    background-color: red; 
 
    height: 20px; 
 
    width: 45%; 
 
    display: inline-block; 
 
    margin-top: 20px; 
 
}

<div class="outer"> 
 
    <span></span> 
 
    <div class="bar"></div><div class="bar"></div> 
 
</div>