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