Curso de CSS / Modelo de caixa: conteúdo, padding, borda e margem

O modelo de caixa CSS descreve a área de conteúdo de um elemento, o preenchimento, a borda e a margem externa. Essas áreas afetam suas dimensões visíveis e espaçamento, enquanto as margens verticais adjacentes podem colapsar sob condições particulares.

Identifique as quatro áreas da caixa

A imagem abaixo mostra as localizações das quatro áreas. Texto ou imagens são colocados dentro do conteúdo azul, e o preenchimento amarelo e uma borda verde envolvem o exterior. A margem laranja está fora da borda. A cor da imagem é para distinguir a área, e a cor de fundo do elemento não é aplicada na própria margem.

Quando uma cor de fundo é definida, ela normalmente preenche as áreas de conteúdo e padding e pode aparecer atrás da borda. O valor inicial da cor de fundo é transparente. O fundo do elemento não é desenhado na área de margem. Portanto, para expandir a área colorida do cartão, você precisa aumentar o padding, não a margem. A extensão do fundo pode ser alterada com uma propriedade separada, mas o comportamento padrão é usado aqui.

Calcule larguras declaradas e externas

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid #2f6e9b;
  margin: 16px;
  background-color: #eaf4fa;
}

Para um elemento regular content-box, width: 200px mede o conteúdo. Adicionar 20px de padding e 2px de borda em ambos os lados resulta em uma caixa de borda de 244px. As margens de 16px ficam fora dela, tornando o espaço horizontal, incluindo ambas as margens, de 276px. As margens verticais podem colapsar, então não aplique essa soma simples a todos os casos verticais. Para mais detalhes, veja CSS Largura, Altura, Limites min/max e box-sizing.

Use box-sizing: border-box para incluir o padding e a borda na largura declarada. Alterar apenas essa propriedade neste exemplo resulta em uma caixa de borda de 200px e uma área de conteúdo de 156px. Compare os valores alternando box-sizing na mesma .card e restaure o valor original depois do teste. Veja MDN: Introdução.

Leia a abreviação de espaçamento de um a quatro valores

Os valores de margem também são especificados na mesma ordem. Se o valor for dois, ele se aplica para cima e para baixo, esquerda e direita; se for três, ele se aplica para cima, esquerda e direita, abaixo; e se for quatro, no sentido horário a partir do topo. Se você quiser alterar apenas algumas direções, use propriedades individuais como padding-top. Se você reescrever propriedades abreviadas posteriormente, os valores individuais especificados anteriormente também podem mudar, portanto, verifique a ordem de aplicação.

padding-inline e margin-block são propriedades lógicas com base na direção da escrita do texto. Em geral, na escrita horizontal da esquerda para a direita, inline corresponde a esquerda e direita, e block corresponde a cima e baixo, mas na escrita vertical, a direção física é diferente. Isso nem sempre significa uma direção horizontal ou vertical fixa. Você pode verificar a correspondência de direção na descrição de margin-block do MDN.

Entenda o colapso de margens verticais

As margens verticais adjacentes em um fluxo normal de bloco são condicionalmente mescladas em uma única lacuna. Isso é chamado de colapso de margem. Margens positivas em que a margem inferior do elemento anterior é de 20px e a margem superior do próximo elemento é de 30px podem resultar em 30px, o maior dos dois valores, em vez da soma de 50px.

O colapso de margens não combina margens horizontais ou padding, e as margens de itens Flexbox e Grid não colapsam como margens de bloco em fluxo normal. Margens entre pais e filhos e margens negativas introduzem outras condições. Este exercício compara deliberadamente apenas margens verticais positivas entre dois blocos irmãos. Veja MDN: Colapso de margem.

Execute o exemplo e meça cada área

Salve o código abaixo como box-model.html em UTF-8 e abra-o. O primeiro cartão verifica as quatro áreas, e as duas linhas dentro da caixa pontilhada são para observar o colapso da margem vertical. A última caixa mostra o padding para três valores.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Box model and spacing exercise</title>
  <style>
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .card { width: 200px; padding: 20px; border: 2px solid #2f6e9b;
      margin: 16px; background-color: #eaf4fa; }
    .collapse-demo { max-width: 300px; padding: 8px; border: 1px dashed #777; }
    .row { padding: 8px; background: #e9f7ef; }
    .first { margin-bottom: 20px; }
    .second { margin-top: 30px; }
    .three-values { max-width: 250px; padding: 10px 20px 30px;
      border: 1px solid #b98022; background: #fff4d9; }
  </style>
</head>
<body>
  <h1>The four box areas</h1>
  <div class="card">The content width is 200px; the width including the border is 244px.</div>
  <h2>Vertical margin collapsing</h2>
  <div class="collapse-demo">
    <div class="row first">Bottom margin: 20px</div>
    <div class="row second">Top margin: 30px</div>
  </div>
  <h2>Padding with three values</h2>
  <div class="three-values">Top: 10px; left and right: 20px; bottom: 30px</div>
</body>
</html>

1. Nas ferramentas de desenvolvimento, em Elements, selecione o .card e procure a exibição do modelo de caixa em Styles ou Computed. Certifique-se de que o conteúdo é 200px, o padding à esquerda e à direita é 20px, a borda é 2px, e a margem é 16px.
2. Altere apenas o padding para 30px. O conteúdo permanecerá 200px e a largura até a borda será 264px. Se você retornar ao valor original de 20px e alterar a margem para 32px, a largura do próprio cartão permanecerá 244px e o espaçamento ao redor mudará.
3. Olhe entre as duas linhas dentro da caixa pontilhada. As margens verticais positivas de 20px e 30px são combinadas, resultando em um espaçamento de 30px. Se você mudar a margem inferior da primeira linha para 40px, o espaçamento se torna 40px. Depois de comparar, volte para 20px.
4. Verifique se o padding inferior de .three-values é 30px, o superior é 10px e o esquerdo e direito são 20px. Se você deletar os últimos 30px para fazer dois valores, o inferior também se tornará 10px.

O espaçamento que difere do esperado pode ocorrer devido à margem padrão p·h1 do navegador, seletores de maior especificidade ou colapso de margens. Primeiro, verifique qual é a margem de cada elemento e altere um valor de cada vez. Alterações temporárias nas ferramentas de desenvolvedor desaparecem ao atualizar, e as alterações salvas nos arquivos devem ser revertidas manualmente para seus valores originais.