Dúvida sobre display: inline-block;

Oi Leandro, tudo bem?

A propriedade "display: inline-block;" é muito útil quando queremos que um elemento tenha as características de um elemento "inline" (que ocupa apenas o espaço necessário ao seu conteúdo) e de um elemento "block" (que ocupa toda a largura disponível).

Um exemplo prático seria quando queremos exibir uma lista de itens, como botões, em uma única linha, mas que cada botão tenha um tamanho definido e um espaço entre eles. Nesse caso, podemos aplicar a propriedade "display: inline-block;" nos botões para que eles fiquem lado a lado e tenham o tamanho e espaçamento desejados.

Outra situação em que essa propriedade pode ser útil é quando queremos centralizar um elemento horizontalmente em relação ao seu contêiner. Nesse caso, podemos aplicar a propriedade "text-align: center;" no contêiner e "display: inline-block;" no elemento que queremos centralizar.

Espero ter ajudado.

Um abraço e bons estudos.