Exemplos: Box Model
1. Anatomia da caixa
Cada elemento HTML é uma caixa com quatro camadas. Observe as cores abaixo:
2. content-box × border-box
Ambas as caixas têm width: 200px, padding: 20px e border: 6px. Veja como o tamanho final difere:
width: 200px
padding: 20px (cada lado)
border: 6px (cada lado)
─────────────────────
Largura total: 252px
200 + 40 + 12 = 252width: 200px
padding: 20px (já incluído)
border: 6px (já incluído)
─────────────────────
Largura total: 200px
width inclui tudo!Por que usar border-box?
Se você define width: 50% em dois elementos que dividem uma linha, com content-box eles vão ultrapassar os 100% assim que você adicionar qualquer padding ou border. Com border-box os 50% sempre serão respeitados.
3. Colapso de margens (margin collapse)
Quando duas margens verticais se encontram, o CSS utiliza a maior delas, não a soma. O espaço entre os blocos abaixo é 30px (não 50px).
TIP
Colapso acontece apenas em margens verticais entre elementos de block. Não ocorre com elementos flex/grid, nem em elementos com padding, border ou overflow diferente de visible.
4. Shorthand de padding e margin
O shorthand segue a ordem topo → direita → baixo → esquerda (sentido horário). Valores omitidos espelham o oposto.
padding: 32pxpadding: 32px 8pxpadding: 32px 8px 4pxpadding: 32px 8px 4px 24px5. Controle interativo de padding
Ajuste o slider para ver como o padding afeta o tamanho da caixa em tempo real. A caixa abaixo usa box-sizing: border-box, então sua largura total permanece fixa em 280px: é o espaço de conteúdo interno que muda.
Se fosse content-box: 280 + 2×20 = 320px