水平スクロール - ホワイトギャップの問題

Question

現在、私は水平のサイトをコーディングしていますが、唯一の問題はdivの間に白い隙間があることです。私はすべてのdivに0パディングとマージンを追加しようとしましたが、それはまだ動作していません。問題の内容を知っている人はいますか？

は、ここに私の問題の簡単な例を示します。これは、インラインブロックに共通の問題であるように思わ

https://codepen.io/Omgyouwould/pen/RZeegP

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.main_wrap { 
 
    height: 100%; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow-y: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: inline-block; 
 
    color: white; 
 
    padding: 30px; 
 
} 
 

 
/* colors */ 
 

 
.green { 
 
    background-color: green; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
}

<div class="main_wrap"> 
 
    <div class="wrapper green"> 
 
    <h1>Hello there.</h1> 
 
    </br> 
 
    <p>Use the botton scroll bar to navigate.</p> 
 
    </div> 
 
    <div class="wrapper blue"> 
 
    <h1>Hello there.</h1> 
 
    </br> 
 
    <p>Use the botton scroll bar to navigate.</p> 
 
    </div> 
 
    <div class="wrapper red"> 
 
    <h1>Hello there.</h1> 
 
    </br> 
 
    <p>Use the botton scroll bar to navigate.</p> 
 
    </div> 
 
</div>

Answer 1

、いくつかの選択肢が/回避策はhereを概説しています。マイナスマージンを追加するだけで十分に機能しましたが、これは一部の古いブラウザ（IE 6/7）では機能しません。