03_THEBOXMODEL.md

EN: The Box Model

Every element in our HTML/CSS is treated as if it was a box. This is the BOX MODEL, very important concept to learn.

We can use pixels or percentages.

Here's what we can specify in the Box Model.

1. HEIGHT
2. WIDTH
3. BORDER
4. PADDING: inside.
5. MARGIN: outside.

When we add a padding, a margin or a border, the overall size of our box increases.

---

PT: O Modelo Caixa

Todos os elementos em HTML/CSS são tratados como se fossem caixas. Este é o famoso MODELO CAIXA ("box model"), conceito muito importante de ser aprendido. Vale a pena gastar um tempo compreendendo. Pesquise sobre.

Podemos usar pixels ou porcentagens para dimensões.

Aqui o que podemos especificar no Modelo Caixa.

1. HEIGHT
2. WIDTH
3. BORDER
4. PADDING: dentro.
5. MARGIN: fora.

Quando a gente adiciona o padding, margin ou um border, o tamanho total da caixa aumenta.