Uma das propriedades básicas de cada elemento HTML é o seu display. Por padrão, elementos como div, section, p, h1, h2, ul, li, article são display block e elementos como a, span, b, i, em são display inline.

Agora qual a diferença entre eles?

Display Block

Ocupa 100% da largura do elemento pai
Ocupa sempre a sua própria linha e é posicionado abaixo do elemento anterior
A altura é definida de acordo com o conteúdo interno
É possível definir Width e Height
Você pode definir valores de margin-top e margin-bottom
Display Inline

Ocupa a largura total do seu conteúdo apenas
Um elemento inline após outro elemento inline ocupam a mesma linha
Não é possível definir Width e Height
Não é possível definir valores de margin-top e margin-bottom
Ao aplicar o float, automaticamente eles assumem características de display block
Se aplicado dentro de um texto, irá seguir o fluxo do conteúdo

Caio Vargas
Atendimento Whatsapp
Iniciar Atendimento!