Entenda o modelo de caixa
Controle espaço interno/externo com padding, border e margin.
- Aplicar box model com sizing previsível.
Todo elemento é uma caixa: conteúdo, padding, border e margin. Padding fica dentro da borda; margin fica fora.
1.card {
2 width: 320px;
3 padding: 24px;
4 border: 2px solid #d5dfd8;
5 margin: 16px;
6 box-sizing: border-box;
7}A 320px card, including padding and border
Com border-box, largura declarada já inclui padding e border.
Principais conclusões
Aplicar box model com sizing previsível.
Prefira regras simples e reutilizáveis.
Padronize tokens e estados para facilitar evolução visual.
Quiz da aula
5 perguntas · aprovação com 4 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em CSS
Estilize a página de exemplo, veja as mudanças na prévia isolada e execute verificações nos estilos calculados.
Espaçe um card
Estilize .card com padding: 24px, border: 2px solid #d5dfd8 e box-sizing: border-box.
- Estilos da caixa do card
Seu CSS é aplicado a uma página de exemplo em uma prévia isolada. Os testes verificam os estilos calculados.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…