2

Estou com um problema no meu css. Estava elaborando um estilo para formatar alguns botões. Tudo ocorreu bem. Porém, os meus botões estão com uma margem extra aparecendo. Ou seja, eu não defini margem nos meus botões, porém eles estão aparecendo com margem.

Exemplo:

.container .item{
    background-color: lightgreen;
    display:inline-block;
    margin:0;
    padding:10px;
}
<div class="container">

  <button class="item">Item</button>
  <button class="item">Item</button>
  <button class="item">Item</button>
</div>

Perceba que eu defini que o botão teria margin:0, porém o mesmo está com margem.

Eu percebi que o problema acontece por causa do inline-block, pois quando eu troco para block com float:left o problema é resolvido. Veja:

.container .item {
   float: left;
   background-color: lightgreen;
   margin:0;
   display:block;
}
<div class="container">

      <button class="item">Item</button>
      <button class="item">Item</button>
      <button class="item">Item</button>
    </div>

Porém float:left nesse caso não é desejável, pois, por exemplo, costumo a usar text-align:right para mudar os alinhamentos dos botões, e isso não funciona com float:left.

Existe alguma maneira de remover essas margens extras que estão aparecendo, sem tirar o inline-block dos meus botões?

0

2 Respostas 2

2

Ele coloca esses espaços para separar os elementos que "estão na mesma linha", como os espaços que colocamos entre uma palavra e outra. É "padrão" isso.

Para resolver você pode:

1) Negativar a margin-left ou margin-right de cada elemento (exemplo);

2) Deixar os elementos lado a lado no código HTML, sem quebra de linha ou espaço (exemplo).

Até existem outros jeitos de contornar essas situações, mas acredito que com essas duas alternativas já irá solucionar seu problema.

1
  • Eu não entendi porquê deram -1. A resposta não está errada. Commented 18/02/2016 às 17:35
0

Deixar sua <div class="container"> com display: flex; ou display: table; resolve, mas não sei se ira te atrapalhar no seu alinhamento dos botões

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 .