ng-repeat и интервал кнопок в Chrome & Edge & Firefox

Question

У меня действительно странное поведение на всех браузерах, и я надеюсь, что кто-то сможет это объяснить.

<div style="margin-top:5px"> 
    <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button>     
    <button ng-repeat="operation in xyz.operations" class="btn btn-default">{{operation.name}}</button> 
</div> 

В DIV У меня есть кнопка, а другая кнопка элемент, имеющий нг-повтора на нем. Первая «статическая» кнопка и первая кнопка, отображаемая ng-repeat, имеют некоторый интервал, который я бы не ожидал. Я не нашел никакой информации о том, почему между клавишами есть пробел, но его внимание на всем браузере, который я тестировал, поэтому я предполагаю, что в связи с Angg's ng-repeat может возникнуть причина.

Вот что показывает Chrome на Dev-Tools Элементов:

Там, кажется, не быть любой селектор CSS который соответствует по положению элемента. Когда я реорганизовать их в DOM, используя Dev-Tools, то странное поведение сохраняется:

Рассчитанное окном для элемента является тем же для всех кнопок, вот как это выглядит:

Answer 1

Эта проблема в значительной степени не имеет никакого отношения к тому, как работает ng-repeat. Кнопка элемент имеет отображать встроенный блок по умолчанию (MDN)

Бороться пространство между кнопками, просто дать им запас слева от негативных 5px

This CSS-уловок тему стоит читать, и Херес демо вашей проблемы и исправление для него

#fix button{ 
 
    display: inline; 
 
    margin-right: -5px; 
 
}

<div id="problem"> 
 
    <button>clear</button> 
 
    <button>clear</button> 
 
    <button>clear</button> 
 
</div> 
 

 
<div id="fix"> 
 
    <button>clear</button> 
 
    <button>clear</button> 
 
    <button>clear</button> 
 
</div>