Modelo de Caixa do CSS (Modelo de Caixa)

O modelo de caixa do CSS descreve como alinhar visivelmente os elementos na página da web.

O que é o Modelo de Caixa

Cada elemento exibível contém um ou mais retângulos. O modelo de caixa do CSS geralmente descreve como alinhar esses retângulos na página da web. Esses retângulos podem ter diferentes atributos e podem interagir de diferentes maneiras, mas cada retângulo tem uma área de conteúdo e margens, margens e bordas opcionais ao redor.

A figura a seguir demonstra como os atributos CSS de margem, preenchimento e borda determinam o espaço ocupável do elemento na página da web.

largura e altura do elemento

Normalmente, quando você usa CSS larguraealturaQuando você define a largura e a altura do elemento, na verdade, você está definindo apenas a largura e a altura da área de conteúdo do elemento. A largura e a altura reais da caixa do elemento dependem de vários fatores.

A área de caixa do elemento pode ocupar o espaço real da seguinte forma:

As diferentes maneiras de usar os atributos fornecidas nos próximos capítulos.