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?