Elementos Block e Inline

Elementos Block e Inline

Elementos HTML têm um comportamento padrão de layout. Os dois tipos mais clássicos são block e inline.

Block

Elementos block ocupam toda a largura disponível e começam em uma nova linha.

Exemplos:

<div> 

<p>

<h1> 

<section>

 Ficam um abaixo do outro.

Inline

Elementos inline ocupam somente o espaço do conteúdo e ficam na mesma linha.

Exemplos:

<span> 

<a> 

<strong>

Ficam lado a lado, se houver espaço.

Visual

Block:

[div          ]
[p            ]
[h1           ]

Inline:

[link] [texto] [span]

Importante!!!

• Elementos inline normalmente não respeitam width e height como block.
• Para misturar os dois mundos existe:display: inline-block;