2

Eu tenho 3 botões um do lado do outro e queria que ficassem com 1px de margin apenas entre eles mas ta ficando muito mais:

inserir a descrição da imagem aqui

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

Aqui o 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;
}

1 Resposta 1

2

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .