nav li{
display: inline;
margin: 0 0 0 15px;
}.produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; }
nav li{
display: inline;
margin: 0 0 0 15px;
}.produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; }
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