O box model, peça por peça

Todo elemento é um retângulo

Botões redondos, avatares circulares e faixas diagonais não mudam o fato por baixo. Todo elemento que o navegador renderiza ocupa uma caixa retangular. Um <p>, um <button>, uma <img> e um <article> inteiro recebem cada um uma caixa. As regras do CSS para tamanho, espaçamento e posicionamento são regras sobre como essa caixa se comporta. Este curso é sobre esse retângulo único, e as quatro camadas, aninhadas umas dentro das outras, que o compõem.

As quatro camadas, de dentro para fora

flowchart TB
  subgraph M["margin — espaço fora da borda"]
    subgraph B["border — desenhada na borda"]
      subgraph P["padding — espaço dentro da borda"]
        C["conteúdo"]
      end
    end
  end

Leia de dentro para fora, porque é essa a ordem em que cada camada é adicionada:

• Content (conteúdo): o texto, imagem ou elementos filhos propriamente ditos, o que o elemento contém.
• Padding: espaço transparente entre o conteúdo e a borda, ainda contado como parte do elemento, ainda pinta a cor de fundo do elemento.
• Border (borda): uma linha visível (ou invisível) envolvendo o padding e o conteúdo, com sua própria largura, estilo e cor.
• Margin (margem): espaço transparente fora da borda, separando esse elemento do que estiver ao lado. Margem não pertence ao fundo de ninguém, é espaçamento puro entre elementos.

As próximas aulas cobrem quatro propriedades. padding, border e margin dimensionam as três últimas camadas. box-sizing decide como width e height se relacionam com elas.

Vendo isso no DevTools

O DevTools de todo navegador desenha esse diagrama para o elemento que você selecionar. São quatro retângulos aninhados com números reais em cada camada. Lá no curso Fundamentos do DOM você abriu o DevTools para inspecionar a árvore de elementos. O mesmo painel "Elements" ou "Inspector" tem uma aba "Computed" ou "Layout" que mostra esse box model ao vivo. Selecione qualquer elemento em qualquer página, e em vez de imaginar as quatro camadas, você vai ver as medidas exatas em pixels delas. Olhe esse painel sempre que um layout parecer errado. Ele responde "por que tem um espaço aqui?" mais rápido do que encarar o CSS.

Cor de fundo alcança o padding, nunca a margem

Um detalhe pega quase todo mundo. O background-color de um elemento pinta o conteúdo, o padding e a área sob a borda, mas nunca a margem.

.card {
  background-color: lightblue;
  padding: 20px;
  margin: 20px;
}

Esse azul claro preenche o conteúdo e os 20px de padding ao redor, dando a impressão visual de uma caixa maior e pintada. Os 20px de margem continuam transparentes. Mostram o que estiver atrás do elemento, seja o fundo da página ou a cor do pai. Se você quiser mais espaço colorido visível, isso é um problema de padding. Se você quiser mais separação de elementos vizinhos sem cor visível, isso é um problema de margem. Confundir os dois é um erro comum de box model, e é por isso que este curso dá uma aula inteira a cada um.

O que este curso cobre

• Aula 1, O box model, peça por peça: content, padding, border, margin, e como o DevTools mostra os quatro (você está aqui)
• Aula 2, box-sizing (content-box vs border-box): o que width e height medem
• Aula 3, Padding: espaço dentro da borda, e como ele é definido
• Aula 4, Border: a linha entre padding e margem, mais cantos arredondados
• Aula 5, Margin: espaço fora da caixa, e centralização com margin auto
• Aula 6, Colapso de margem: a regra surpreendente onde margens verticais adjacentes se fundem
• Aula 7, Juntando tudo: construindo um card estilizado usando cada camada do box model

No final, uma regra que define padding, border ou margin não vai ser chute. Você vai saber qual retângulo ela redimensiona e por quê.