Why even with margin 0 and padding 0 there is still space between the elements?

Question

I have 3 buttons on each other and I wanted them to have 1px of margin just between them but it’s getting much more:

The html:

<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>

Here the css:

* {
    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;
}

Answer 1

This is just the way the elements inline-block behave.
These spacings are the same as spacing between words. If we put the elements all together (words all together) we will have no space between the elements.

Line breaks also count as spacing between elements inline-block.

That being said, if we remove the spaces (line breaks) between the buttons, this behavior will disappear:

* {
    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>

There are also other ways to remove these spaces, such as adding a negative margin to the elements where the property inline-block was applied, among other methods. You can read this article that I created about this topic a few years ago at this link: Strange spacing between inline-block elements