Elementos de bloco vs. elementos inline

Uma das distinções mais fundamentais e importantes no HTML é entre elementos de bloco e elementos inline. Entender essa diferença é crucial para prever como seus elementos se comportarão na página e como você poderá estilizá-los com CSS.

Você já teve um gostinho dessa diferença nas lições sobre <div> (bloco) e <span> (inline). Agora, vamos aprofundar e generalizar esse conceito.

Elementos de Bloco (Block-level Elements)

Pense em elementos de bloco como "caixas" que ocupam uma linha inteira na página.

Características principais:

• Sempre começam em uma nova linha: Cada elemento de bloco inicia em uma linha separada e força o próximo elemento a também começar em uma nova linha.
• Ocupam 100% da largura disponível: Por padrão, eles se estendem por toda a largura do seu elemento pai, mesmo que seu conteúdo seja pequeno.
• Podem conter outros elementos de bloco e elementos inline: São contêineres versáteis.
• Margens e padding funcionam em todas as direções: Você pode aplicar margin-top, margin-bottom, padding-top, padding-bottom sem problemas.

Exemplos comuns de elementos de bloco:

• <div> (o contêiner genérico)
• <p> (parágrafo)
• <h1> a <h6> (títulos)
• <ul>, <ol>, <dl> (listas)
• <li>, <dt>, <dd> (itens de lista)
• <table> (tabelas)
• <form> (formulários)
• Elementos semânticos do HTML5: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

<!-- Exemplo visual de elementos de bloco -->
<style>
  div, p, h1 {
    background-color: lightblue;
    border: 1px solid blue;
    margin: 5px;
    padding: 5px;
  }
</style>

<div>Eu sou uma div.</div>
<p>Eu sou um parágrafo.</p>
<h1>Eu sou um título.</h1>

Elementos Inline (Inline Elements)

Pense em elementos inline como "palavras" ou "pequenos trechos" que fluem dentro de uma linha de texto.

Características principais:

• Não começam em uma nova linha: Eles continuam na mesma linha do conteúdo adjacente.
• Ocupam apenas a largura necessária para seu conteúdo: Eles não se estendem por toda a largura disponível.
• Podem conter apenas outros elementos inline: Não podem conter elementos de bloco.
• Margens e padding verticais são ignorados ou se comportam de forma estranha: margin-top, margin-bottom, padding-top, padding-bottom não afetam o layout vertical da linha. Margens e padding horizontais (margin-left, margin-right, padding-left, padding-right) funcionam normalmente.
• Não podem ter largura (width) ou altura (height) definidas: Sua dimensão é determinada pelo conteúdo.

Exemplos comuns de elementos inline:

• <span> (o contêiner genérico)
• <a> (links)
• <strong>, <em> (ênfase e importância)
• <img> (imagens, por padrão)
• <code>, <var>, <abbr> (código, variável, abreviação)
• <input>, <label>, <select>, <textarea> (elementos de formulário)

<!-- Exemplo visual de elementos inline -->
<style>
  span, a, strong {
    background-color: lightgreen;
    border: 1px solid green;
    margin: 5px; /* Margens verticais serão ignoradas */
    padding: 5px; /* Padding verticais serão ignorados */
  }
</style>

<p>
  Este é um texto com uma <span>palavra</span> e um
  <a href="#">link</a> e uma palavra <strong>forte</strong>.
</p>

Alterando o comportamento com CSS: display

A boa notícia é que você pode mudar o comportamento padrão de qualquer elemento HTML usando a propriedade CSS display.

display: block

Transforma um elemento inline em um elemento de bloco. Agora ele começará em uma nova linha e ocupará 100% da largura.

span {
  display: block; /* Agora o span se comporta como uma div */
  width: 100px; /* E pode ter largura definida */
}

display: inline

Transforma um elemento de bloco em um elemento inline. Agora ele não começará em uma nova linha e ocupará apenas a largura do conteúdo.

div {
  display: inline; /* Agora a div se comporta como um span */
}

display: inline-block

Este é um híbrido muito útil! Um elemento inline-block se comporta como um elemento inline em relação ao fluxo do texto (não quebra linha), mas como um elemento de bloco em relação às suas próprias propriedades (pode ter width, height, margin-top, margin-bottom que funcionam).

li {
  display: inline-block; /* Itens de lista lado a lado */
  width: 150px;
  height: 50px;
  margin: 10px;
  background-color: yellow;
}

Por que essa distinção é importante?

1. Layout: Define como os elementos se posicionam uns em relação aos outros na página.
2. Estilização: Afeta como você pode aplicar width, height, margin e padding.
3. Previsibilidade: Ajuda a entender por que um elemento está se comportando de uma certa maneira (ex: por que minha <span> não está aceitando margin-top?).
4. Semântica: Embora display seja uma propriedade CSS (visual), a escolha do elemento HTML (semântica) deve vir primeiro. Você pode mudar o display de um <a> para block, mas ele continua sendo semanticamente um link.

Resumindo

• Elementos de Bloco:
  • Começam em nova linha.
  • Ocupam 100% da largura.
  • Podem conter blocos e inline.
  • Margens/padding funcionam em todas as direções.
  • Ex: <div>, <p>, <h1>, <ul>, <header>.
• Elementos Inline:
  • Não quebram linha.
  • Ocupam largura do conteúdo.
  • Podem conter apenas inline.
  • Margens/padding verticais ignorados.
  • Não aceitam width/height.
  • Ex: <span>, <a>, <strong>, <img>.
• display CSS: Permite alterar o comportamento padrão:
  • display: block;
  • display: inline;
  • display: inline-block; (híbrido útil)
• Entender essa distinção é fundamental para o layout e estilização de páginas web.