Dominando o modelo de caixa CSS

Todo elemento HTML é tratado como uma caixa retangular.

Títulos, parágrafos, botões, imagens e cards seguem essa mesma ideia. Se você entende como essas caixas funcionam, controlar espaçamento e layout fica muito mais fácil.

O modelo de caixa CSS explica como conteúdo, padding, bordas e margens se encaixam.

O que é o modelo de caixa CSS

O modelo de caixa CSS é o conjunto de regras que controla como um elemento é dimensionado e espaçado.

Pense em uma foto emoldurada:

• A foto é o conteúdo.
• O espaço ao redor da foto é o padding.
• A moldura é a borda.
• O espaço vazio da parede ao redor da moldura é a margem.

Quando um layout parece estranho, o modelo de caixa costuma ser o primeiro lugar para verificar.

Área de conteúdo

A área de conteúdo é a parte interna da caixa.

É onde ficam texto, imagens ou elementos filhos.

<p class="bio-text">Olá, meu nome é Alex.</p>

<style>
  .bio-text {
    width: 200px;
    background-color: yellow;
  }
</style>

O conteúdo do parágrafo fica limitado a 200px de largura.

Use width quando quiser que texto ou mídia caibam dentro de um espaço específico.

Tenha cuidado com alturas fixas em texto. Se o texto quebrar em mais linhas, ele pode sair da caixa.

Padding

Padding é o espaço dentro da caixa.

Ele fica entre o conteúdo e a borda. O fundo do elemento aparece através do padding por padrão.

<div class="alert-box">Aviso: salve seu trabalho!</div>

<style>
  .alert-box {
    background-color: yellow;
    padding: 20px;
  }
</style>

Agora o texto tem respiro dentro da caixa amarela.

Use padding em botões, cards, alertas e qualquer elemento em que o conteúdo não deve encostar na borda.

Você pode definir padding em um lado com propriedades como padding-top, padding-right, padding-bottom e padding-left.

Borda

A borda é a linha ao redor do padding e do conteúdo.

Você pode controlar sua largura, estilo e cor.

<div class="avatar">A</div>

<style>
  .avatar {
    width: 64px;
    height: 64px;
    border: 4px solid black;
  }
</style>

A borda emoldura o elemento.

Use bordas para separar seções, contornar cards ou criar limites visuais claros.

Se a largura da borda for 0, a borda não aparece e não ocupa espaço no layout.

Margem

Margem é o espaço fora da borda.

Ela empurra outros elementos. Margens são transparentes, então você vê o fundo do pai ou da página através delas.

<button class="primary-button">Enviar</button>
<button>Cancelar</button>

<style>
  .primary-button {
    margin-right: 15px;
  }
</style>

O primeiro botão empurra o segundo botão.

Use margens para criar espaços entre elementos, como parágrafos, botões, cards e seções.

Padding vs margem

Padding e margem criam espaço, mas fazem isso em lugares diferentes.

Padding cria espaço dentro do elemento. Margem cria espaço fora do elemento.

<div class="box padded-box">Eu uso padding.</div>
<div class="box margin-box">Eu uso margem.</div>

<style>
  .box {
    background-color: lightblue;
    border: 2px solid darkblue;
  }

  .padded-box {
    padding: 30px;
  }

  .margin-box {
    margin-top: 30px;
  }
</style>

O padding aumenta a área azul. A margem cria um espaço fora da segunda caixa.

Use padding quando o interior do elemento precisa de mais espaço. Use margem quando elementos precisam de mais espaço entre si.

Como o tamanho total do elemento é calculado

Por padrão, CSS usa o dimensionamento content-box.

Isso significa que width controla apenas a área de conteúdo. Padding e bordas são adicionados por cima.

<div class="sidebar">Menu</div>

<style>
  .sidebar {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    background-color: lightgray;
  }
</style>

A largura visível total é:

200px conteúdo
+ 40px padding esquerdo e direito
+ 10px borda esquerda e direita
= 250px total

Isso explica por que um elemento pode parecer mais largo do que o width que você escreveu.

Margens ficam fora da borda. Elas não fazem parte do tamanho visível da caixa, mas ainda afetam quanto espaço o elemento ocupa no layout.

O que box-sizing faz

box-sizing muda como o navegador calcula width e height.

Ele permite decidir se padding e bordas serão adicionados fora da largura ou incluídos dentro dela.

<input type="text" class="text-field" placeholder="Seu nome" />

<style>
  .text-field {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
</style>

O input permanece dentro do contêiner mesmo com padding.

box-sizing não inclui margem. Margens sempre ficam fora da caixa.

content-box vs border-box

content-box é o padrão. Padding e bordas são adicionados fora da largura.

border-box inclui padding e bordas dentro da largura que você define.

<div class="card content-box-card">content-box</div>
<div class="card border-box-card">border-box</div>

<style>
  .card {
    width: 300px;
    padding: 30px;
    border: 5px solid red;
    background-color: pink;
    margin-bottom: 20px;
  }

  .content-box-card {
    box-sizing: content-box;
  }

  .border-box-card {
    box-sizing: border-box;
  }
</style>

O card content-box fica mais largo que 300px.

O card border-box permanece exatamente com 300px de largura.

Use border-box quando quiser que regras de largura sejam mais fáceis de prever.

Por que muitos desenvolvedores usam box-sizing: border-box

border-box simplifica a matemática do layout.

Se você define um elemento com width: 50%, ele pode manter essa largura mesmo depois de adicionar padding e bordas.

Muitos projetos adicionam esta regra perto do início do arquivo CSS:

Isso torna o dimensionamento mais previsível em toda a página.

Tenha cuidado ao adicionar isso a um projeto antigo. Layouts existentes podem ter sido criados com base no comportamento padrão content-box.

Colapso de margens

O colapso de margens acontece quando margens verticais se tocam.

Em vez de somar, o navegador usa a maior margem.

<h2 class="title">Meu título</h2>
<p class="text">Meu texto de parágrafo.</p>

<style>
  .title {
    margin-bottom: 30px;
  }

  .text {
    margin-top: 10px;
  }
</style>

O espaço entre o título e o parágrafo é 30px, não 40px.

O colapso de margens só afeta margens verticais no fluxo normal do documento. Margens esquerda e direita não colapsam.

Esse comportamento muitas vezes ajuda páginas de texto a manter espaçamento estável entre títulos e parágrafos.

Erros comuns de iniciantes

• Esquecer que navegadores adicionam margens padrão a elementos como body, títulos e parágrafos.
• Usar padding quando você realmente quer espaço entre dois elementos separados.
• Usar margem quando você quer que a cor de fundo do elemento cresça.
• Esquecer que o dimensionamento padrão content-box adiciona padding e bordas fora da largura.
• Esperar que margens horizontais colapsem. Apenas margens verticais podem colapsar.

Mini tarefa

Veja esta regra CSS:

Qual largura visível total esta caixa ocupará na tela?

Resposta: 520px.

Isso é 400px de largura de conteúdo, mais 50px de padding esquerdo, 50px de padding direito, 10px de borda esquerda e 10px de borda direita.

Quiz rápido

Pergunta 1: Qual camada é transparente e deixa aparecer o fundo atrás do elemento: padding ou margem?

Resposta: Margem.

Pergunta 2: Se dois parágrafos estão empilhados verticalmente e ambas as margens que se tocam são de 20px, qual é o espaço entre eles?

Resposta: 20px, porque margens verticais colapsam.

Pergunta 3: Qual valor de box-sizing inclui padding e bordas dentro da largura definida?

Resposta: border-box.

Pequeno desafio

Tente estilizar este card de perfil e o espaçamento do texto:

• Dê a .card uma largura de 250px, uma borda sólida, padding e box-sizing: border-box.
• Dê a .first-paragraph uma margem inferior de 40px.
• Dê a .second-paragraph uma margem superior de 20px.
• Observe que o espaço entre os parágrafos é 40px, não 60px.

<div class="card">
  <h3>Perfil do usuário</h3>
  <p class="first-paragraph">Informações básicas do perfil.</p>
  <p class="second-paragraph">Mais detalhes abaixo.</p>
</div>

<style>
  .card {
    /* Adicione largura, borda, padding e border-box */
  }

  .first-paragraph {
    /* Adicione uma margem inferior de 40px */
  }

  .second-paragraph {
    /* Adicione uma margem superior de 20px */
  }
</style>

Uma resposta possível:

Resumo

• O modelo de caixa CSS envolve cada elemento com conteúdo, padding, borda e margem.
• Conteúdo é onde ficam texto, imagens e elementos filhos.
• Padding cria espaço dentro da caixa.
• Bordas emolduram a caixa fora do padding.
• Margens criam espaço transparente fora da borda.
• O modelo padrão content-box adiciona padding e bordas fora da largura definida.
• box-sizing: border-box inclui padding e bordas dentro da largura definida.
• Margens verticais podem colapsar em uma única margem maior em vez de somar.