O que é o Modelo de Caixa?
Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 33 de 76.
No CSS, cada elemento HTML é tratado como uma caixa retangular, seguindo o Modelo de Caixa (Box Model). Este modelo consiste em quatro partes principais:
- Conteúdo – O texto real, imagem ou outro conteúdo dentro da caixa.
- Padding – Espaço entre o conteúdo e a borda. Ele aumenta o tamanho do elemento, mas mantém a cor de fundo dentro dele.
- Borda – Uma linha que envolve o padding e o conteúdo. Ela pode ter diferentes estilos, cores e larguras.
- Margem – Espaço fora da borda que separa o elemento de outros elementos.
Entender o Box Model ajuda a controlar o espaçamento e o layout no web design! 🚀
Folha de consulta
O CSS Box Model trata cada elemento HTML como uma caixa retangular com quatro partes:
- Conteúdo – O texto real, imagem ou outro conteúdo dentro da caixa
- Padding – Espaço entre o conteúdo e a borda
- Borda – Uma linha que envolve o padding e o conteúdo
- Margem – Espaço fora da borda que separa o elemento de outros elementos
Experimente você mesmo
Esta lição não inclui um desafio de código.
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Styling with CSS
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento de TextoDecoração de TextoDesafio de Recapitulação nº 1Desafio de Recapitulação nº 27Modelo de Caixa Parte 1
O que é o Modelo de Caixa?PaddingMargensBordasLargura e AlturaDesafio de Revisão
3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é Flex Box?Flex DirectionJustify ContentAlign ItemsO Centro PerfeitoDesafio de Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta Tag ViewportLayouts FluidosUnidades de ViewportFundamentos de Media QueriesImagens Flexíveis