Когда в разметке между блоками есть пространство, то и в браузере будет промежуток, ширина которого зависит от размера шрифта. Например для шрифта 14px - этот промежуток всегда будет равен 4px.
Пути решения:
.conteiner div {
display: inline;
}
.conteiner div button {
width: 100px;
height: 20px;
}
.conteiner div .margin--4 {
margin-right: -4px;
}
.font-size-0 {
font-size: 0;
}
.font-size-0 .button {
font-size: 14px;
}
<!-- Заполнение пустого пространства комментарием -->
<div class="conteiner">
<div><button></button></div><!--
--><div><button></button></div><!--
--><div><button></button></div>
</div>
<!-- Отрицательный отступ справа -->
<div class="conteiner">
<div><button class="margin--4"></button></div>
<div><button class="margin--4"></button></div>
<div><button class="margin--4"></button></div>
</div>
<!-- Растягивание закрывающего тега -->
<div class="conteiner">
<div><button></button></div
><div><button></button></div
><div><button></button></div>
</div>
<!-- Установка нулевого размера шрифта для блоков -->
<div class="conteiner font-size-0">
<div><button></button></div>
<div><button></button></div>
<div><button></button></div>
</div>
margin-right: -4px;