O que é o Modelo de Caixa?
Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 33 de 76.
Em CSS, todo elemento HTML é tratado como uma caixa retangular, seguindo o Modelo de Caixa. Esse modelo consiste em quatro partes principais:
- Conteúdo: O texto, a imagem ou outro conteúdo efetivo dentro da caixa.
- Preenchimento: 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 preenchimento 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 design web! 🚀
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 Estilização com CSS
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento do TextoDecoração do TextoDesafio de Revisão nº 1Desafio de Revisão nº 27Modelo de Caixa — Parte 1
O que é o Modelo de Caixa?PreenchimentoMargensBordasLargura e AlturaDesafio de Revisão
8Modelo de Caixa — Parte 2
Dimensionamento da CaixaRaio da BordaTransbordamentoSombra da CaixaDesafio de Revisão3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é uma Flex Box?Direção da Flex BoxJustificar conteúdoAlinhar itensO centro perfeitoDesafio da Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta tag viewportLayouts fluidosUnidades de viewportFundamentos das Media QueriesImagens flexíveisPratique por conta própria: Playground de Web