Porque no caso dos itens do menu foi usado
.menu-principal li {float: left;}
e não
.menu-principal li {inline-block} ?
Parece dar na mesma.
Porque no caso dos itens do menu foi usado
.menu-principal li {float: left;}
e não
.menu-principal li {inline-block} ?
Parece dar na mesma.
Oi, Sergio, tudo bem?
Algumas propriedades em determinadas aplicações terão o mesmo efeito, mas não na teoria e em outras práticas não terá.
O inline-block é um valor atribuído à propriedade display que especifica o tipo de caixa que será estilizado, podendo ser: flex, grid, inline, inline-block, none, e várias outras. Ou seja, quando definimos um display: inline-block
´para um determinado elemento, como por exemplo, um menu, estamos dizendo que queremos que o elemento esteja em bloco e os links numa única linha.
A propriedade `float diz se o elemento que recebe o seu valor sairá do fluxo padrão e irá flutuar direto ou esquerdo do container. Geralmente, muito usado para posicionar texto ao redor de imagens.
No caso do código, teve o mesmo efeito, pois o float: left
fez os itens do menu flutuarem a esquerda do elemento. Mas particularmente, prefiro o inline-block
por ser mais descritivo e por ter menos efeitos colaterais.
Para saber mais de ambas as propriedades:
Qualquer dúvida é só falar!