Entendendo a Diferença entre Display Inline e Display Block

Resolvi compartilhar essa experiência para ajudar vocês a compreenderem essa diferença fundamental e também para demonstrar como resolver alguns problemas comuns que podem surgir.

Demonstrando a Diferença

No design que estava implementando, havia um título seguido por uma pequena bola com um fundo gradiente. Para criar essa bola, pensei em usar um elemento span com as seguintes propriedades no Tailwind CSS:

<span class="rounded-full w-3 h-3 bg-gradient-to-tr from-[#4158D0] via-[#C850C0] via-46% to-[#FFCC70]" />

No entanto, quando executei o código, não aconteceu nada. A bola não apareceu. E por quê? Porque span é um elemento inline por padrão no CSS, o que significa que ele não pode receber altura (height) e largura (width).

Então, mudei o display para block. Agora, a bola apareceu! Mas criou outro problema - a bola ocupou uma linha inteira no layout, fazendo o título pular para a próxima linha.

<span class="block rounded-full w-3 h-3 bg-gradient-to-tr from-[#4158D0] via-[#C850C0] via-46% to-[#FFCC70]" />

A solução para esse problema é usar display: inline-block. Isso faz com que o elemento se comporte como um elemento de bloco (aceitando altura e largura), mas permanece na linha, como um elemento inline. Veja como fica o código:

<span class="inline-block rounded-full w-3 h-3 bg-gradient-to-tr from-[#4158D0] via-[#C850C0] via-46% to-[#FFCC70]" />

Pra quem gosta de vídeo

Se você é uma pessoa que aprende melhor visualmente, confira este vídeo onde demonstro essa diferença entre display: inline e display: block:

Referências

Para se aprofundar mais nesse assunto, aqui estão algumas referências que podem ser úteis:

1. MDN Web Docs - Display

Espero que isso ajude a esclarecer a diferença entre display: inline e display: block no CSS. Lembre-se, entender as nuances do CSS é crucial para dominar o design da Web!