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
Muito Obrigado!!!!!!
de nada Fred!