html - Why is there a hairline gap / border between these block elements in Chrome but not Firefox -

when add background color container , stack block elements inside, there hairline gap visible between elements in chrome. no such gap exists in firefox.

why? , how can avoided without additional wrapper elements?

it's easier see in 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>

if assume used css , html, should work fine in browsers. maybe it's chrome extension have installed adds pixels or elements html. try disable chrome extensions (if any) , refresh.