Display: Transformando elementos inline em block

Transformando inline em block

Com display: block;, um elemento inline passa a se comportar como elemento de bloco

.span{

display: block; 

}

→ Ocupa toda a largura disponível por padrão.
→ Sempre começa em uma nova linha.
→ Empurra o próximo elemento para baixo.
→ Aceita width, height, margin e padding com mais controle.

Exemplo:

Modo Inline

Antes (inline):  <span>Item 1</span> <span>Item 2</span>

 
→ Ficam lado a lado.

Mode Block

Depois (block):span{ display:block; }

exemplo de block aqui  

→ Cada span fica em sua própria linha.

Muito usado para links de menu vertical, spans estilizados e organização de layout.