CSS box model
O curso trata do box model do CSS: o retângulo que todo elemento renderizado ocupa e suas quatro camadas aninhadas, conteúdo, padding, borda e margem. Ele mostra como o box-sizing define o que width e height medem e como os shorthands de padding e margin leem de um a quatro valores. Também explica largura, estilo, cor e raio da borda, margens negativas, centralização com margin auto e as regras do colapso de margem vertical. A última aula monta um card estilizado com todas as camadas.
O que você vai aprender
- ✓As quatro camadas do box model e como o DevTools as exibe
- ✓Como content-box e border-box mudam o cálculo de width e height
- ✓Shorthands de padding e margin com um a quatro valores, e as propriedades por lado
- ✓Largura, estilo e cor da borda, e cantos arredondados com border-radius
- ✓Margens negativas e centralização horizontal com margin: 0 auto
- ✓Quando margens verticais adjacentes colapsam e quando não colapsam
O box model, peça por peça
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…
Ler a aula completa grátis →Currículo
7 aulasO box model, peça por peça
Apresenta conteúdo, padding, borda e margem, como o DevTools os mostra e por que o fundo não pinta a margem.
box-sizing: content-box vs border-box
Compara content-box e border-box e explica o reset universal de border-box que abre as folhas de estilo.
Padding: espaço dentro da borda
Trata das quantidades de valores do shorthand de padding, das propriedades por lado e da proibição de valores negativos.
Border: a linha entre padding e margin
Explica o shorthand border, o estilo obrigatório, bordas por lado e cantos arredondados ou círculos com border-radius.
Margin: espaço fora da caixa
Mostra o shorthand e as propriedades longhand de margin, margens negativas e centralização de bloco com margin auto.
Colapso de margem
Descreve como margens verticais adjacentes se fundem no maior valor, onde isso vale e como depurar o efeito.
Juntando tudo: um card estilizado
Monta um card com imagem, título, texto e botão, relacionando cada declaração à sua camada do box model.