Modelo de Caixa CSS

Modelo de Caixa CSS

Todos os elementos HTML podem ser considerados como caixas. No CSS, ao falar sobre design e layout, usamos o termo 'modelo de caixa' ou 'modelo de caixa'.

O modelo de caixa do CSS é essencialmente uma caixa que envolve cada elemento HTML. Inclui: margem externa, borda, preenchimento interno e conteúdo real. A imagem a seguir mostra o modelo de caixa:

Modelo de Caixa CSS

Explicação das partes diferentes:

  • Conteúdo - O conteúdo da caixa, onde são exibidos o texto e as imagens.
  • Preenchimento - Limpar a área ao redor do conteúdo. O preenchimento interno é transparente.
  • Borda - Envolver a borda interna e o conteúdo.
  • Margem - Limpar a área além da borda. A margem é transparente.

O modelo de caixa permite que adicionemos bordas ao redor do elemento e definamos o espaço entre elementos.

A parte mais interna da caixa do elemento é o conteúdo real, seguido diretamente pelo preenchimento interno. O preenchimento interno apresenta o fundo do elemento. A margem da borda do preenchimento interno é a borda. Fora da borda é a margem externa, que por padrão é transparente e, portanto, não obscurece nenhum elemento atrás dela.

Dica:O fundo é aplicado à área composta por conteúdo, preenchimento interno e borda.

O preenchimento, a borda e a margem são opcionais, com valor padrão zero. No entanto, muitos elementos serão definidos pelo estilo da agência de usuário. É possível substituir esses estilos do navegador ajustando a margem e o preenchimento do elemento para zero. Isso pode ser feito separadamente ou usando um seletor universal para definir todos os elementos:

* {
  margem: 0;
  preenchimento: 0;
}

No CSS, width e height se referem à largura e altura da área de conteúdo. O aumento do preenchimento, borda e margem não afeta o tamanho da área de conteúdo, mas aumenta o tamanho total da caixa do elemento.

Suponha que cada lado da caixa tenha 10 pixels de margem externa e 5 pixels de preenchimento interno. Se desejar que essa caixa de elemento atinja 100 pixels, é necessário definir a largura do conteúdo como 70 pixels. Veja a imagem a seguir:

Exemplo de Modelo de Caixa CSS 
#box {
  largura: 70px;
  margem: 10px;
  preenchimento: 5px;
}

Dica:O preenchimento, a borda e a margem podem ser aplicados a todos os lados de um elemento ou a um lado específico.

Dica:A margem pode ser negativa e, em muitos casos, é necessário usar margens negativas.

Exemplo

Demonstração do modelo de caixa:

div {
  largura: 300px;
  borda: 15px sólida verde;
  preenchimento: 50px;
  margem: 20px;
}

Experimente você mesmo

Largura e altura do elemento

Para definir corretamente a largura e altura do elemento em todos os navegadores, é necessário entender como funciona o modelo de caixa.

Aviso importante:Ao definir as propriedades width e height de um elemento usando CSS, é necessário apenas ajustar a largura e altura da área de conteúdo. Para calcular o tamanho total do elemento, é necessário adicionar margem interna, borda e margem externa.

Exemplo

<div> O total da largura do elemento será de 350px:

div {
  largura: 320px;
  preenchimento: 10px;
  borda: 5px sólida cinza;
  margem: 0; 
}

Experimente você mesmo

Cálculo conforme abaixo:

320px (largura)
+ 20px (margem interna esquerda + direita)
+ 10px (borda esquerda + direita)
+ 0px (margem externa esquerda + direita)
= 350px

A largura total do elemento deve ser calculada assim:

Largura total do elemento = largura + margem interna esquerda + margem interna direita + borda esquerda + borda direita + margem externa esquerda + margem externa direita

A altura total do elemento deve ser calculada assim:

Altura total do elemento = altura + margem superior interna + margem inferior interna + borda superior + borda inferior + margem superior externa + margem inferior externa