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

Question

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

Navigation

#1 by (2 votes)

2

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

Thehtml:

<divclass="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's 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;
}

html css

asked by anonymous 23.09.2017 / 15:37

1 answer

How to read an excel file and do the mapping About __forceinline and __inline

score 2 · Accepted Answer

This is just the way inline-block behaves. These spacings are the same as word spacings. If we put the elements together (words all together) we will not have any space between the elements.

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

That said, if we remove the spaces (breaks of lines) 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 inline-block property was applied, among other methods. You can read this article that I created on this topic a few years ago in this link: Weird spacing between elements inline-block