Elementos HTML Block e Inline

Todo elemento HTML visível é renderizado pelo navegador como uma caixa block ou inline. Caixas block empilham verticalmente e ocupam toda a largura disponível; caixas inline fluem horizontalmente dentro de uma linha de texto, como palavras numa frase. Entender essa distinção é essencial para controlar o layout da página.

É importante saber que "block" e "inline" não são categorias fixas do HTML — elas descrevem como um elemento é renderizado por padrão. O HTML5 moderno agrupa os elementos por categorias de conteúdo (conteúdo de fluxo, conteúdo de fraseado, etc.), enquanto block versus inline é, na prática, um conceito CSS controlado pela propriedade display. Isso significa que o comportamento padrão de qualquer elemento pode ser substituído: um <span> pode se comportar como block, e um <div> como inline.

Veja também: Propriedade CSS display · Tag <div> · Tag <span>

Esta página explica o que são elementos block e inline, apresenta a lista completa de cada tipo, mostra como o display permite alterar o padrão, aborda a importante regra de aninhamento e indica quando usar <div> em vez de <span>.

Elementos Block

Um elemento block é um elemento HTML que começa em uma nova linha e ocupa toda a largura horizontal disponível do seu elemento pai. Esse tipo de elemento cria blocos de conteúdo (parágrafos, divisões de página). A maioria dos elementos HTML são elementos block.

Elementos block são usados dentro do corpo de um documento HTML e podem conter elementos inline ou outros elementos block.

Exemplo de um elemento block:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>This is a block-level element. It starts on a new line and takes up the full width.</div>
    <p>This is another block-level element. It also starts on a new line.</p>
  </body>
</html>

Experimente Você Mesmo »

Elementos block:
`<address>`
`<canvas>`
`<dt>`
`<footer>`
`<hr>`
`<noscript>`
`<pre>`
`<ul>`

Elementos Inline

Ao contrário dos elementos block, os elementos inline não começam em uma nova linha. Eles surgem dentro de uma linha e ocupam apenas a largura necessária. Elementos inline são incluídos como parte do texto principal.

Elementos inline geralmente contêm outros elementos inline, ou podem ser vazios.

Exemplo de um elemento inline:

Aqui, um <img> fica ao lado de um parágrafo, e um elemento <a> inline flui dentro do texto sem quebrar a linha:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="https://placehold.co/200x185?text=Photo" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Experimente Você Mesmo »

Para ver o fluxo inline claramente, coloque um <span> no meio de uma frase. Como <span> é inline, o texto continua na mesma linha e apenas o conteúdo do span é afetado:

<p>The total price is
  <span style="color: red; font-weight: bold;">$49.99</span>
  including tax.</p>

O $49.99 estilizado permanece na linha do texto em execução — nada quebra para uma nova linha.

Elementos inline:
`<a>`
`<br>`
`<data>`
`<i>`
`<kbd>`
`<output>`
`<script>`
`<strong>`
`<time>`

Alterando a Exibição com CSS

Como block e inline são comportamentos de renderização, você pode alterná-los com a propriedade CSS display. Este é um dos motivos mais comuns para usar display.

No exemplo abaixo, um <span> é forçado a renderizar como block (começa em uma nova linha e ocupa a largura total), e um <div> é forçado a renderizar como inline (fica no fluxo do texto):

<!DOCTYPE html>
<html>
  <head>
    <style>
      span.as-block {
        display: block;
        background: #e0f7fa;
      }
      div.as-inline {
        display: inline;
        background: #ffecb3;
      }
    </style>
  </head>
  <body>
    <span class="as-block">I am a span behaving like a block.</span>
    <p>Text before <div class="as-inline">a div behaving inline</div> text after.</p>
  </body>
</html>

display: inline-block

Existe um terceiro valor útil, display: inline-block. Ele flui junto com outros conteúdos como um elemento inline, mas também respeita width, height e margin/padding superior/inferior como um elemento block — o melhor dos dois mundos.

Um caso de uso clássico é uma barra de navegação horizontal ou uma fileira de botões que precisam de largura e preenchimento definidos, mas ainda devem ficar lado a lado:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn {
        display: inline-block;
        width: 120px;
        padding: 10px 0;
        margin: 4px;
        text-align: center;
        background: #2196f3;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <a class="btn" href="#">Home</a>
    <a class="btn" href="#">About</a>
    <a class="btn" href="#">Contact</a>
  </body>
</html>

Cada link mantém sua width e padding (comportamento block) e ainda se alinha horizontalmente (comportamento inline).

Regra de Aninhamento: Block Dentro de Inline Não é Permitido

Uma regra fundamental do HTML: um elemento block não deve ser colocado dentro de um elemento inline. Por exemplo, um <span> (inline) não deve envolver um <div> (block). Fazer isso produz HTML inválido, e os navegadores podem "corrigir" a marcação de maneiras inesperadas.

Inválido — um <div> block dentro de um <span> inline:

<!-- Invalid: do not put a block element inside an inline element -->
<span>
  <div>This block must not be here.</div>
</span>

Válido — manter o <span> inline dentro do <div> block:

<!-- Valid: an inline element nested inside a block element -->
<div>
  <span>This inline element belongs here.</span>
</div>

A direção inversa (inline dentro de block) é sempre permitida. Quando você precisar de um contêiner block, use um elemento block como <div>, não <span>. Observação: links são um caso especial — desde o HTML5, um elemento <a> pode envolver conteúdo block.

div vs span: Contêineres Genéricos

Quando nenhum elemento existente se encaixa, o HTML oferece dois elementos "wrapper" genéricos e sem significado semântico, que você usará constantemente:

<div> — um contêiner genérico block. Use-o para agrupar seções maiores de conteúdo para layout ou estilização (um card, uma barra lateral, uma linha).
<span> — um contêiner genérico inline. Use-o para selecionar um trecho pequeno de texto dentro de uma linha, como colorir uma única palavra ou adicionar um tooltip.

Uma regra simples: se você está agrupando partes inteiras da página, escolha <div>; se está marcando um fragmento dentro do texto em execução, escolha <span>.

<!-- div: groups a block section -->
<div class="card">
  <h2>Welcome</h2>
  <p>Hello, <span class="username">Aleq</span>!</p>
</div>

Prefira um elemento semântico (<section>, <article>, <nav>, <strong>, <em>, …) quando ele descrever seu conteúdo; recorra a <div>/<span> apenas quando nada mais significativo se aplicar.

Prática

Qual afirmação sobre elementos HTML block e inline está correta?

Se um elemento é renderizado como block ou inline é controlado pela propriedade CSS display e pode ser alterado.Um elemento block como div pode ser colocado dentro de um span inline sem produzir HTML inválido.O elemento span é um contêiner genérico block usado para agrupar grandes seções de uma página.Definir display como inline-block remove a capacidade do elemento de respeitar width e height.