Isto é apenas a maneira como os elementos inline-block
se comportam.
Estes espaçamentos são o mesmo que espaçamentos entre palavras. Se colocarmos os elementos todos juntos (palavras todas juntas) não iremos ter nenhum espaço entre os elementos.
Quebras de linha também contam como espaçamento entre os elementos inline-block
.
Dito isto, se removermos os espaços (quebras de linhas) entre os botões, este comportamento irá desaparecer:
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
button {
background: #f00;
cursor: pointer;
display: inline-block;
font: 24px "Alfa Slab One", cursive;
margin: 1px;
text-shadow: 1px 1px #fff;
width: 150px;
}
.truco {
background: #ff0;
}
<!-- Sem quebras de linha -->
<div class="popup">
<p id="popupText">TRUCO!</p>
<div class="popup-buttons">
<button>SIM</button><button class="truco">SEIS!</button><button>NÃO</button>
</div>
</div>
<!-- Com quebras de linha -->
<div class="popup">
<p id="popupText-2">TRUCO 2!</p>
<div class="popup-buttons">
<button>SIM</button>
<button class="truco">SEIS!</button>
<button>NÃO</button>
</div>
</div>
Existem também outras maneiras de remover estes espaços, como adicionar uma margem negativa aos elementos onde a propriedade inline-block
foi aplicada, entre outros métodos. Podes ler este artigo que eu criei sobre este tópico há uns anos atrás neste link: Estranho espaçamento entre elementos inline-block