Os elementos HTML são renderizados como caixas retangulares em uma página da web. Cada elemento possui sua área de conteúdo, preenchimento (padding), borda e margem.

• A área de conteúdo é o espaço onde o conteúdo real do elemento reside. Sua largura depende do tipo de elemento (block-level ou inline - vamos considerar a diferença entre eles e sua especificidade para trabalhar mais adiante no curso). Sua altura depende do próprio conteúdo.
• O padding é a área entre o conteúdo e a borda, que pode ser usada para adicionar espaço entre o conteúdo e a borda.
• A borda envolve o elemento. Por padrão, a largura da borda é 0. Além disso, se não especificarmos a cor da borda, ela assumirá a cor do conteúdo.
• A margem é o espaço entre a borda e outros elementos na página.

Nota

Por padrão, alguns elementos possuem propriedades de padding (preenchimento) e margin (margem) pré-determinadas. Isso foi feito para garantir que uma página web seja legível mesmo sem nenhum estilo.

Propriedades de largura e altura

As propriedades width (largura) e height (altura) são utilizadas para definir o tamanho de um elemento. A largura e altura de um elemento podem variar dependendo do tipo de modelo de caixa.

É importante mencionar também que, para a maioria dos elementos, ter apenas a propriedade width costuma ser suficiente, pois a height será determinada automaticamente. Isso ajuda a evitar problemas de overflow quando a width ou a height do conteúdo é menor do que o conteúdo interno.