EspañolDeutschFrançaisItalianoPortuguêsРусскийΕλληνικά日本語中文(简体)हिन्दी; हिंदीالعربية
Definir como idioma padrão
Perguntas de PF - Fórum

Como prevenir um aumento de tamanho do elemento HTML, adicionando um preenchimento

Programação de CSS  
 
Como prevenir um aumento de tamanho do elemento HTML, adicionando um preenchimento

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.

Junte-se o canal de Telegrama

Deixe-em um comentário ou entrar para oFórum
Share on Facebook Tweet about this on Twitter Share on Google+ Pin on Pinterest Share on Reddit Share on VK Share on StumbleUpon Share on Tumblr Share on LinkedIn Email this to someone Print this page