Нежелательные границы вокруг абсолютного DIV х в Div-контейнер

Question

я создал большой Div-контейнер, который может содержать несколько элементов (ДИВ-х), так:

Но, как вы можете видеть, есть нежелательный белый промежуток внизу и справа от каждого элемента, и я не знаю, откуда это происходит. Элементы должны быть прокручивать, если они не вписываются в контейнер (по горизонтали)

HTML:

<div class="maincontainer"> 

     <div class="container"> 
      <div class="box"> 
      </div> 
      <div class="box2"> 
      </div> 
     </div> 

     <div class="container"> 
      <div class="box"> 
      </div> 
      <div class="box2"> 
      </div> 
     </div> 

     <div class="container"> 
      <div class="box"> 
      </div> 
      <div class="box2"> 
      </div> 
     </div> 

</div> 

CSS:

.maincontainer { 
    width: 90%; 
    min-height: 200px; 
    margin: auto; 
    border: 1px solid black; 
    padding: 0;  
    overflow-x: auto; 
    white-space: nowrap; 
} 

.container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
    background-color: #444444; 
    margin: 0; 
    padding: 0; 
} 

.box{ 
    position: absolute; 
    top:0; 
    right: 0; 
    left: 0; 
    bottom:0; 
    margin:auto; 
    height:100px; 
    width:180px; 
    background-color:#666666; 
} 

.box2{ 
    position: absolute; 
    top:0; 
    right: 0; 
    left: 0; 
    bottom:0; 
    margin:auto; 
    height:80px; 
    width:160px; 
    background-color:#fff; 
} 

Я также сделал Plunker

Любой Помогите оценить! Спасибо

Answer 1

Я нашел решение. Установка размера шрифта maincontainer на 0 делает это! Гугл удаление пробелов в CSS и нашла:

this

Answer 2

По умолчанию ваши divs являются block элементами, однако вы изменили их на inline элементов. Inline Элементы имеют пробел. Вот почему между вашими двумя элементами есть разрыв.

Вы можете изменить maincontainer display к flex так:

.maincontainer { 
    width: 90%; 
    display:flex; 
    min-height: 200px; 
    margin: auto; 
    border: 1px solid black; 
    padding: 0;  
    overflow-x: auto; 
    white-space: nowrap; 
} 

.container { 

    position: relative; 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
    background-color: #444444; 
    margin: 0; 
    padding: 0; 
} 

.box{ 
    position: absolute; 
    top:0; 
    right: 0; 
    left: 0; 
    bottom:0; 
    margin:auto; 
    height:100px; 
    width:180px; 
    background-color:#666666; 
} 

.box2{ 
    position: absolute; 
    top:0; 
    right: 0; 
    left: 0; 
    bottom:0; 
    margin:auto; 
    height:80px; 
    width:160px; 
    background-color:#fff; 
} 

Это должно быть! :)