2つのdiv間のギャップ

Question

2つのdivタグの間にgapがある場合は、この問題が発生しています。ここに私のコードです - 私は手動で2つの部門に関連付けられているマージン/パディングを上書きしようとしましたが、それは役立つようには思われません。

は、ここでCSSは、ここで私は何をしないのですHTMLの一部

<div class="playground"> 
     <div class = 'left_block'></div> 
     <div class = 'right_block'></div> 
... 

だ

.left_block{ 
    display: inline-block; 
    background-color: blue; 
    width:40%; 
    height: 2em; 
    margin: 0px; 
    margin-right: 0px; 
    padding-right: 0px; 
    border-width: 0px; 
    overflow: hidden; 
} 

.right_block{ 
    margin: 0px; 
    display: inline-block; 
    background-color: red; 
    width: 59%; 
    height: 2em; 
    margin-left: 0px; 
    padding-left: 0px; 
    border-width: 0px; 
    overflow: hidden; 
} 

ように見える何ですか？

Answer 1

floatのプロパティはどうですか？あなたのCSSには問題がありますか？しかし、誰もがそのような場合は、なぜ私は理解を助けることができる - 問題を解決する両方のブロックにleft`： `floatを追加することにより

.left_block { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    width: 40%; 
 
    height: 2em; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    float: left; 
 
} 
 
.right_block { 
 
    display: inline-block; 
 
    background-color: red; 
 
    width: 60%; 
 
    height: 2em; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    float: left; 
 
}

<div class="playground"> 
 
    <div class='left_block'></div> 
 
    <div class='right_block'></div> 
 
</div>