Dimensionamento da caixa CSS
Dimensionamento da caixa CSS
A propriedade CSS box-sizingnos permite incluir o preenchimento e a borda na largura e altura total de um elemento.
Sem a propriedade de dimensionamento de caixa CSS
Por padrão, a largura e a altura de um elemento são calculadas assim:
largura + preenchimento + borda = largura real de um elemento
altura + preenchimento + borda = altura real de um elemento
Isso significa: Quando você define a largura/altura de um elemento, o elemento geralmente aparece maior do que você definiu (porque a borda e o preenchimento do elemento são adicionados à largura/altura especificada do elemento).
A ilustração a seguir mostra dois elementos <div> com a mesma largura e altura especificadas:
Os dois elementos <div> acima acabam com tamanhos diferentes no resultado (porque div2 tem um preenchimento especificado):
Exemplo
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
A box-sizingpropriedade resolve este problema.
Com a propriedade de dimensionamento de caixa CSS
A box-sizingpropriedade nos permite incluir o preenchimento e a borda na largura e altura totais de um elemento.
Se você definir box-sizing: border-box;em um elemento, o preenchimento e a borda serão incluídos na largura e na altura:
Aqui está o mesmo exemplo acima, box-sizing: border-box;
adicionado a ambos os elementos <div>:
Exemplo
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Como o resultado do uso do the box-sizing: border-box;é muito melhor, muitos desenvolvedores desejam que todos os elementos em suas páginas funcionem dessa maneira.
O código abaixo garante que todos os elementos sejam dimensionados dessa maneira mais intuitiva. Muitos navegadores já usam box-sizing: border-box;muitos elementos de formulário (mas não todos - e é por isso que as entradas e as áreas de texto parecem diferentes na largura: 100%;).
Aplicar isso a todos os elementos é seguro e sábio:
Exemplo
* {
box-sizing: border-box;
}
Propriedade de dimensionamento de caixa CSS
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |