Quando trabalhamos com HTML e folhas de estilo CSS Há momentos que o comportamento os elementos da página que nós está projetando é muito longe do que podemos pensar que seria isso certo. Nestes casos, Temos que mergulhar-nos Internet para investigar e inquirir sobre eles para dar com a possível solução Isso pode resolver o nosso problema.

Neste caso, Vamos falar sobre o comportamento Quem tem o Elementos HTML Quando atribuí-lo um preenchimento. Suponha que você tenha um elemento div com um altura e largura padrão, em pixels ou em percentagem, que tenham dado uma borda para exibir melhor suas dimensões:

Como você pode ver no Guia CSS, Este recipiente tem um Largura de um 75% e um altura de 100 pixéis.

Agora, Vamos atribuir um preenchimento de 20 pixéis para cada lado:

Podemos ver que, Agora, o contêiner apresenta um preenchimento tornar o texto para separar as bordas, Mas além disso, o aumentou o tamanho do recipiente, ou seja, Agora, tem uma altura e largura do 40 mais pixels devido à preenchimento atribuído a cada um dos seus lados.

Para evitar isso, Vamos usar a propriedade caixa-dimensionamento contêiner, fazendo assim o tamanho do mesmo incluem também sua preenchimento. Para fazer isso, Nós simplesmente atribuir o valor caixa-dimensionamento: fronteira-caixa no CSS, e temos o seguinte resultado:

Desta forma, o contêiner irá manter o preenchimento atribuído, de 20 pixéis, sem aumentar seus dimensões definidas anteriormente.

O que já vimos, também ocorre com os elementos entrada Formas, O que isso, combiná-los para o desenho desejado, Nós devemos ter um pouco de habilidade.

Nós vamos Adicionar um elemento entrada de tipo de texto para o código Já temos, e vamos configurar o entrada com um Largura do 100% do recipiente pai, e um preenchimento de 5 pixéis para aqueles lados superior e inferior, e 10 pixéis para a direita e esquerda.

O que acontece? Que nosso novo elemento entrada fora as dimensões do recipiente pai, mesmo tendo definido uma largura de um 100%. Como corrigi-lo? Como da mesma forma como fizemos com seu recipiente, Nós vamos atribuir Propriedade. caixa-dimensionamento com o valor fronteira-caixa:

Voilà! Aqui vemos como usando o Propriedade. caixa-dimensionamento e atribuindo-lhe o valor fronteira-caixa, Podemos fazer isso a Elementos HTML nosso site é se encaixam perfeitamente, em tamanho, a esses valores atribuídas, evitando que estas crescer Quando atribuir algum tipo de preenchimento para o mesmo.