Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Reset CSS não limpa totalmente as margens.

Olá. Estou com um problema no meu código css. Quero alinhar esses 3 quadros. Quando carrego o site podemos ver na Imagem1 que o reset.css é lido corretamente. Imagem_1

Podemos ver que o item também tem a dimensão correta. Pois 940px * 30%=282px. Imagem_2

Agora, como temos uma largura de 940px e 3 elementos de 282px, era para todos estarem alinhados, mas estamos tendo uma quebra de linha. Desligando o padding no inspetor de código podemos ver que temos uma margem sendo inserida que não foi colocada no código. Imagem_3

Favor reparar que também ativei a opção box-sizing: border-box;

Como eu posso resolver esse problema? Estou abrindo o html no firefox e o sistema operacional é Linux - Ubuntu.

1 resposta
solução!

Olá Thiago.

O uso do display: inline-block tem esse ponto de atenção, fica um espaço entre os elementos.

Você pode diminuir a largura dos elementos para compensar esse espaço extra.

Ou usar o display: flex e align-items: center; pois este display não deixa espaço entre os elementos.

Veja exemplos no site: https://darekkay.com/flexbox-cheatsheet/

Abraço.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software