Resumo do modelo de caixa CSS

O modelo de caixa do CSS (Box Model) define como o elemento da caixa lida com o conteúdo do elemento,Padding、Borda e Margem do modo.

Resumo do modelo de caixa CSS

Modelo de caixa CSS

A parte mais interna da caixa do elemento é o conteúdo real, diretamente cercado pelo padding. O padding apresenta o fundo do elemento. A borda ao redor do padding é a borda. Fora da borda está a margem, que é transparente por padrão, portanto, não obstrui nenhum elemento após ela.

Dica:O fundo é aplicado à área composta pelo conteúdo e pelo padding, borda.

O padding, a borda e a margem são opcionais e o valor padrão é zero. No entanto, muitos elementos serão configurados pelo estilo da tabela de agente do usuário. Pode-se sobrescrever esses estilos dos navegadores configurando o margin e o padding do elemento como zero. Isso pode ser feito separadamente ou usando o seletor universal para configurar todos os elementos:

* {
  margem: 0;
  padding: 0;
}

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

Suponha que cada lado da caixa tenha 10 pixels de margem externa e 5 pixels de padding interno. Se você deseja que a caixa do elemento atinja 100 pixels, é necessário definir a largura do conteúdo como 70 pixels; veja a figura a seguir:

Exemplo de modelo de caixa CSS 
#box {
  largura: 70px;
  margem: 10px;
  padding: 5px;
}

Dica:O padding, 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.

Compatibilidade do navegador

Uma vez que o DTD apropriado foi configurado para a página, a maioria dos navegadores exibirá o conteúdo conforme mostrado na figura acima. No entanto, o IE 5 e 6 exibem incorretamente. De acordo com o padrão do W3C, o espaço ocupado pelo conteúdo do elemento é definido pela propriedade width, enquanto o padding e o valor da borda ao redor do conteúdo são calculados separadamente. Infelizmente, o IE5.X e 6 usam seu próprio modelo não padrão no modo de compatibilidade. A propriedade width desses navegadores não é a largura do conteúdo, mas o total da largura do conteúdo, padding e borda.

Embora haja métodos para resolver esse problema. Mas a melhor solução atual é evitar esse problema. Isso é, não adicione margem interna com largura especificada aos elementos, mas tente adicionar margem interna ou margem externa aos elementos pai e filho.

Tradução de termos

  • element: elemento.
  • padding: margem interna, também há documentos que a traduzem como preenchimento.
  • border: borda.
  • margin: margem externa, também há documentos que a traduzem como espaço ou margem de espaço.

No codew3c, chamamos padding e margin uniformemente de margem interna e margem externa. O espaço dentro da borda é a margem interna, e o espaço fora da borda é a margem externa, fácil de lembrar, não é? :)