1
resposta

Exercicio 3 - Como separar os cards sem usar os comentarios entre LIs

Olá. Gostaria de saber se há alguma alternativa aos comentários para tirar o espaçamento entre os cards. Estou usando um plugin que gosto muito, beautify, que me ajuda na indentação. Porém o plugin sempre formata o comentário, de forma que o espaço entre os cards aparecem novamente.

Por isso eu gostaria de saber uma alternativa, até mais intuitiva, para reduzir esses espaços entre os cards, sem precisar dos comentários. Obrigado!

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
1 resposta

Opa Jenipapos, tudo bem? Você pode usar outra propriedade mais nova do CSS 3 pra colocar os elementos inline ( um do lado do outro ). Em vez de usar:

.card {
    display: inline-block;
    width: 25%;
}

Vc pode usar:

section ol {
    display: flex;
    flex-wrap: wrap;
}
.card {
    flex-basis: 25%;
}

O flexbox ( ou flex ) é uma propriedade nova para alinhar os elementos de diversas formas, dê uma olhada nesse post do tableless: http://tableless.com.br/flexbox-organizando-seu-layout/

Repare que no código acima eu usei section ol como seletor, o que não é muito bom. Eu sugiro colocar uma classe para essa ol e usar o seletor CSS pela classe.

Bom é isso, espero ter ajudado!

Qualquer coisa é só falar!

Yuri.