Почему есть промежуток между границами между этими блочными элементами в Chrome, но не Firefox

Question

Когда я добавляю цвет фона в контейнер, а затем складываю элементы блока внутри, между элементами в Chrome присутствует зазор между волосами. В Firefox такого пробела нет.

Почему? И как этого можно избежать без дополнительных элементов оболочки?

Это легче увидеть в этом JS Bin: https://razor-x.jsbin.com/teqevoc/6/edit?html,css,output

.main { 
 
    background-color: black; 
 
} 
 

 
.item { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: white; 
 
}

<div class="main"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
</div>

Answer 1

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

position:relative; 
top: -1px; 

который обычно не заметен на браузерах, таких как Firefox и фиксирует его на WebKit/хром.

Answer 2

Если мы предположим, что вы использовали только CSS и HTML, это должно работать отлично во всех браузерах. Возможно, это расширение хром, которое вы установили, которое добавляет некоторые пиксели или элементы в ваш HTML. Попробуйте отключить все ваши расширения Chrome (если есть) и обновить.