O que é inline-block no CSS?

inline-block — é um valor da propriedade display em CSS que permite aos elementos comportar-se como elementos em linha (ocupar apenas a largura necessária e não iniciar numa nova linha), mas ao mesmo tempo ter a capacidade de definir largura, altura, margens (margin, padding) de qualquer lado, como elementos de bloco.

Características principais:

• Posicionamento em linha: Os elementos com display: inline-block são colocados um após o outro na mesma linha, se houver espaço suficiente.
• Consideração de tamanhos: Pode-se definir width e height. O conteúdo determina o tamanho por padrão, se não forem especificados.
• Margens e bordas completas: São aplicados margin, padding e border de todos os lados (topo, direita, baixo, esquerda), ao contrário dos elementos em linha (inline), onde as margens e bordas verticais não afetam a disposição dos elementos vizinhos.
• Alinhamento vertical: Pode-se usar a propriedade vertical-align para alinhar relativamente aos elementos vizinhos na linha.

Exemplo de uso:

/* Os elementos serão colocados em linha, com tamanhos e margens definidos */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Campo de aplicação:

• Criação de menus de navegação horizontais.
• Disposição de blocos de conteúdo em forma de cartões numa mesma linha.
• Combinação e alinhamento de elementos que devem estar lado a lado, mas com tamanhos definidos.

Comparação com outros valores de display:

display	Descrição	Considera tamanhos (width/height)	Considera margens verticais (margin-top/bottom)	Disposição em linha
block	Sempre começa numa nova linha, ocupa toda a largura disponível.	Sim	Sim	Não
inline	Coloca-se em linha com o texto, ocupa apenas a largura necessária.	Não	Não (margin-left/right afetam)	Sim
inline-block	Coloca-se em linha, mas comporta-se como um bloco em tamanhos e margens.	Sim	Sim	Sim