Display: Transformando elementos block em inline

Display: transformando block em inline

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

div{ display: inline; }

→  Fica na mesma linha de outros elementos.
→  Ocupa apenas o espaço do conteúdo.
→  Não quebra linha automaticamente.
→  Elementos podem ficar lado a lado se houver espaço.

Tags block comuns:

• <div>
• <p> 
• <h1>
• <section> 
• <article>

Exemplo:

Antes (block):

<div>Item 1</div>

<div>Item 2</div>


→  Ficam um abaixo do outro.

Depois:

div{ display:inline; }

→  Ficam lado a lado.

Atençao!!!

inline tem menos controle sobre width e height.

Muito usado em menus horizontais e ajustes de layout simples.