Box Model

---

Todos os elementos podem ser considerados como caixas. Em CSS, o termo "box model" é usado quando falamos sobre layout e design.

Essencialmente, o box model é uma caixa que envolve cada elemento. Consiste em: margens, bordas, preenchimento, e o conteúdo propriamente dito. A imagem abaixo ilustra o box model:

Explicando as partes:

• Conteúdo - O conteúdo da caixa, onde aparecem textos e imagens
• Padding - Limpa uma área ao redor do conteúdo. O preenchimento é transparente
• Border - Uma borda que circunda o padding e o conteúdo
• Margin - Limpa uma área fora da borda. A margem é transparente