Modelo de caixa CSS

Todos os elementos HTML podem ser considerados como caixas.

O modelo de caixa CSS

Em CSS, o termo "modelo de caixa" é usado quando se fala de design e layout.

O modelo de caixa CSS é essencialmente uma caixa que envolve cada elemento HTML. Ele consiste em:

margens, bordas, preenchimento e o conteúdo real. A imagem abaixo ilustra o modelo da caixa:

Explicação das diferentes partes:

• Conteúdo - O conteúdo da caixa, onde o texto e as imagens aparecem
• Preenchimento - Limpa uma área ao redor do conteúdo. O forro é transparente
• Borda - Uma borda que contorna o preenchimento e o conteúdo
• Margem - Limpa uma área fora da fronteira. A margem é transparente

O modelo de caixa nos permite adicionar uma borda ao redor dos elementos e definir o espaço entre os elementos.

Largura e Altura de um Elemento

Para definir a largura e a altura de um elemento corretamente em todos os navegadores, você precisa saber como funciona o modelo de caixa.

Importante: Ao definir as propriedades de largura e altura de um elemento com CSS, basta definir a largura e a altura da rea de conteúdo. Para calcular o tamanho total de um elemento, você também deve adicionar preenchimento, bordas e margens.

                            
div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

Segue o cálculo:

A largura total de um elemento deve ser calculada assim:

Largura total do elemento = largura + preenchimento esquerdo + preenchimento direito + borda esquerda + borda direita + margem esquerda + margem direita.

A altura total de um elemento deve ser calculada assim:

Altura total do elemento = altura + preenchimento superior + preenchimento inferior + borda superior + borda inferior + margem superior + margem inferior.