Como remover o espaço entre elementos inline ou inline-block

Neste artigo você vai aprender a remover o espaço entre elementos inline ou inline-block, e também aprender o por que desse espaço existir

Fala programador(a), beleza? Bora aprender mais sobre elementos de HTML e regras de CSS!

Primeiramente vamos simular um exemplo com HTML, para começar a desenvolver o problema

Veja o código:

<div class="container">
  <span>Teste</span>
  <span>Teste 2</span>
</div>

E este será o nosso CSS:

span {
  background-color: red
}

Se você criou o exemplo no seu PC, vai ver que há um espaço entre os dois spans, desta maneira:

Para retirar este espaço entre os dois elementos inline podemos fazer o seguinte:

• Remover a font-size do elemento pai;
• Adicionar uma font-size aos elementos filhos;

Veja o código:

.container {
  font-size: 0;
}

span {
  font-size: 12px;
  background-color: red
}

Desta maneira o espaço é extinguido e resolvemos o problema

Esta solução é a que vai funcionar com navegadores mais antigos também

Ou você também pode utilizar o display flex, de Flexbox

Que vai unir os elementos e remover este espaço em branco, veja:

.container {
  display: flex;
}

span {
  background-color: red;
}

Conclusão

Neste artigo você aprendeu a remover o espaço entre elementos inline de duas maneiras

Utilizamos uma que altera o font-size do elemento pai para 0 e depois determina o dos elementos filhos

Porém deve ser evitada se você pode utilizar o flexbox em seus projetos

A utilização do display flex é a abordagem mais recomendada para resolver o problema do espaçamento entre os elementos

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube