EasyCode365EasyCode365

Formatação visual básica e posicionamento

CSS não trata apenas de cores, fontes e bordas.

Ele também controla como os elementos ficam na página. Alguns elementos empilham em novas linhas. Alguns elementos ficam dentro de uma linha de texto. Alguns elementos podem ser movidos de sua posição normal.

Nesta aula, você aprenderá o básico sobre fluxo do documento, display e posicionamento simples.

Por que a formatação visual importa

HTML dá estrutura à sua página.

CSS decide como essa estrutura aparece na tela. Por exemplo, talvez você queira que um link com aparência de botão fique ao lado de outro link, ou que um pequeno selo fique no canto de um card.

Para fazer isso, você precisa entender como os elementos se comportam antes de tentar movê-los.

O que document flow significa

Document flow é a forma normal como o navegador coloca elementos na página.

Em inglês e em muitos outros idiomas, o conteúdo geralmente flui da esquerda para a direita e de cima para baixo. Os elementos aparecem na mesma ordem do seu HTML, a menos que o CSS mude esse comportamento.

Muitos problemas de layout para iniciantes acontecem quando o fluxo natural é diferente do que você esperava.

Elementos block

Um elemento block começa em uma nova linha.

Por padrão, ele ocupa toda a largura disponível do contêiner pai. O próximo elemento começa abaixo dele.

Elementos block comuns incluem:

  • <div>
  • <p>
  • <h1>
  • <section>
Editável
<div class="block-example">Primeiro bloco</div>
<div class="block-example">Segundo bloco</div>

<style>
  .block-example {
    display: block;
    margin-bottom: 8px;
    padding: 12px;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
    font-family: Arial, sans-serif;
  }
</style>

Mesmo que o texto seja curto, cada bloco ainda começa em sua própria linha.

Elementos inline

Um elemento inline fica dentro da linha atual.

Ele ocupa apenas a largura necessária para o seu conteúdo. Elementos inline se comportam como palavras em uma frase.

Elementos inline comuns incluem:

  • <span>
  • <a>
  • <strong>
  • <em>
Editável
<p class="inline-demo">
  Este parágrafo tem
  <span class="inline-example">texto inline</span>
  dentro de uma frase.
</p>

<style>
  .inline-demo {
    font-family: Arial, sans-serif;
  }

  .inline-example {
    display: inline;
    width: 200px;
    height: 80px;
    padding: 4px;
    background-color: #fef3c7;
    border: 1px solid #d97706;
  }
</style>

Observe que width e height não controlam o elemento inline como controlariam um elemento block.

Elementos inline-block

inline-block é uma opção intermediária útil.

Um elemento inline-block pode ficar ao lado de outro conteúdo como um elemento inline. Ele também pode usar width, height, padding e margins de forma mais previsível, como um elemento block.

Editável
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>

<style>
  .tag {
    display: inline-block;
    width: 110px;
    padding: 10px;
    margin: 4px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    text-align: center;
  }
</style>

Isso é útil para selos, pequenos links de navegação, labels e elementos simples com aparência de botão.

Comparando block, inline e inline-block

  • display: block começa em uma nova linha e pode usar width e height.
  • display: inline permanece em uma linha de texto e não usa width e height da forma normal.
  • display: inline-block fica em uma linha, mas ainda respeita width e height.
Editável
<div class="display-demo">
  <div class="item block-item">block</div>
  <span class="item inline-item">inline</span>
  <span class="item inline-item">inline</span>
  <span class="item inline-block-item">inline-block</span>
  <span class="item inline-block-item">inline-block</span>
</div>

<style>
  .display-demo {
    font-family: Arial, sans-serif;
  }

  .item {
    width: 130px;
    height: 44px;
    margin: 6px;
    padding: 8px;
    border: 2px solid #4b5563;
    background-color: #f3f4f6;
  }

  .block-item {
    display: block;
  }

  .inline-item {
    display: inline;
    background-color: #fee2e2;
  }

  .inline-block-item {
    display: inline-block;
    background-color: #dbeafe;
  }
</style>

As mesmas regras de width e height se comportam de forma diferente porque os valores de display são diferentes.

O que positioning significa

A propriedade position controla se um elemento permanece no fluxo normal ou se move para fora dele.

O posicionamento usa propriedades de deslocamento:

  • top
  • right
  • bottom
  • left

Essas propriedades só funcionam quando o elemento tem um valor de position que aceita deslocamentos.

Esta aula cobre static, relative e absolute. Também existem fixed e sticky, que serão vistos em uma aula posterior.

Posicionamento static

position: static é o padrão para elementos HTML.

Um elemento static segue o fluxo normal do documento. As propriedades de deslocamento não têm efeito sobre ele.

Somente leitura

A maioria dos elementos deve permanecer static, a menos que você tenha uma razão clara para movê-los.

Posicionamento relative

position: relative mantém o elemento no fluxo normal.

Depois disso, você pode usar top, right, bottom ou left para movê-lo visualmente a partir de sua posição original.

Editável
<div class="row">Item normal</div>
<div class="row moved-item">Item relative</div>
<div class="row">Item normal</div>

<style>
  .row {
    width: 180px;
    margin-bottom: 8px;
    padding: 10px;
    background-color: #e5e7eb;
    border: 1px solid #6b7280;
    font-family: Arial, sans-serif;
  }

  .moved-item {
    position: relative;
    left: 30px;
    background-color: #fde68a;
  }
</style>

O item relative se move para a direita, mas o navegador ainda mantém seu espaço original no fluxo.

Posicionamento absolute

position: absolute remove um elemento do fluxo normal.

Outros elementos agem como se o elemento com position absolute não ocupasse espaço normal.

O posicionamento absolute é útil para pequenos detalhes posicionados, como selos, labels, ícones e botões de fechar.

Ele não é uma boa ferramenta para construir o layout de uma página inteira.

O pai posicionado mais próximo

Um elemento com position absolute precisa de um ponto de referência.

Ele procura o ancestral mais próximo com um valor de position diferente de static. Um pai com position: relative é a escolha mais comum.

Se ele não encontrar um ancestral posicionado, usa a página como referência. Isso muitas vezes faz o elemento aparecer longe de onde você esperava.

Exemplo executável: selo no card

Neste exemplo, o card é o pai posicionado e o selo é o filho absolute.

Editável
<div class="profile-card">
  <strong>Curso CSS</strong>
  <span class="lesson-badge">Novo</span>
</div>

<style>
  .profile-card {
    position: relative;
    width: 220px;
    padding: 32px 20px;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .lesson-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #dc2626;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
  }
</style>

O selo usa o card como referência porque .profile-card tem position: relative.

Erros comuns de iniciantes

  • Adicionar width e height a elementos inline: use inline-block ou block quando precisar de tamanho previsível.
  • Usar absolute positioning para o layout inteiro: use primeiro o fluxo normal. Mais tarde, Flexbox e Grid serão ferramentas melhores para layout de páginas.
  • Esquecer o pai posicionado: adicione position: relative ao pai quando um filho absolute deve ser posicionado dentro dele.
  • Esperar que relative positioning mova outros elementos: um elemento com position relative mantém seu espaço original no fluxo.
  • Usar offsets em elementos static: top, right, bottom e left não afetam position: static.

Mini tarefa prática

Imagine um .badge com position: absolute, colocado dentro de um .card que tem o valor padrão position: static.

Qual elemento o selo usará como referência de posicionamento?

Confira as respostas do quiz quando estiver pronto.

Quiz curto com respostas

  1. Qual valor de display permite que elementos fiquem lado a lado e ainda respeitem width e height?
  2. Qual é o valor padrão de position para elementos HTML?
  3. O que position: relative faz com o espaço original do elemento no fluxo normal?

Respostas:

  1. inline-block.
  2. static.
  3. O espaço original continua reservado, mesmo que o elemento seja movido visualmente.

Resposta da mini tarefa prática: como .card é static (não está posicionado), o selo pula esse elemento e procura mais acima pelo ancestral posicionado mais próximo. Se não encontrar nenhum, ele se ancora à página, o que muitas vezes o coloca longe do card. Adicione position: relative a .card para torná-lo a referência.

Pequeno desafio

Estilize o card de notificação abaixo.

Seus objetivos:

  • Faça .card ser a referência de posicionamento.
  • Faça .new-badge ter position absolute.
  • Coloque o selo no canto superior esquerdo do card.
  • Dê ao selo um fundo vermelho e texto branco.
Editável
<div class="card">
  Caixa de entrada
  <span class="new-badge">Novo</span>
</div>

<style>
  .card {
    /* Faça este elemento ser a referência de posicionamento */

    width: 200px;
    margin: 32px;
    padding: 40px;
    background-color: #f3f4f6;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .new-badge {
    /* Remova este elemento do fluxo normal */

    /* Mova-o para o canto superior esquerdo */

    /* Adicione um fundo vermelho e texto branco */

    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: bold;
  }
</style>

Resumo

  • Document flow é a forma normal como o navegador coloca elementos na página.
  • display: block começa em uma nova linha e pode usar width e height.
  • display: inline permanece em uma linha de texto e não usa width e height da forma normal.
  • display: inline-block fica em uma linha e ainda respeita width e height.
  • position: static é o padrão, e offsets não o afetam.
  • position: relative move um elemento visualmente enquanto mantém seu espaço original.
  • position: absolute remove um elemento do fluxo normal.
  • Um elemento com position absolute usa o ancestral posicionado mais próximo como referência.