1
resposta

porque na classe de navegação foi usado o display inline e na classe produtos foi usado o display: inline-block?

nav li{
    display: inline;
    margin: 0 0 0 15px;
}

.produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; }

1 resposta

Oi, Gustavo tudo bem?

Poderia ter sido utilizado o inline-block no primeiro código sem problemas, a principal diferença do inline-block pro inline é que no inline-block eu consigo setar width e height enquanto no inline eu não posso, além de as margens e paddings para cima e para baixo serem respeitadas no inline-block enquanto no inline essas margens e paddings não são respeitadas. Um exemplo simples pode ser visto aqui https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1

O motivo de se usar o tipo inline no primeiro trecho de código pode ser entendido como um número menor de caracteres escritos e uma ''maior semântica'' ao meu ver , já que ele a príncipio cumpre somente o papel de inline e não inline-block (pois no código não tem nem width nem height e nem as margens para cima e para baixo) então para realmente limitar esses tipos de parâmetros podemos fazer uso desse display, mas no geral é usado o inline-block mesmo

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