Box Sizing CSS

Box Sizing CSS

CSS box-sizing A propriedade permite que incluímos o preenchimento (espessura) e a borda no total da largura e altura do elemento.

Supondo que não seja especificado a propriedade CSS box-sizing

Por padrão, a largura e altura do elemento são calculadas assim:

  • width + padding + border = largura real do elemento
  • height + padding + border = altura real do elemento

Isso significa: quando você define a largura/altura do elemento, o elemento geralmente parece maior do que você definiu (porque a borda e o preenchimento do elemento já foram adicionados à largura/altura especificada do elemento).

A imagem a seguir mostra dois elementos <div> com a mesma largura e altura especificada:

Este div é menor
（largura é 300px, altura é 100px).
Este div é maior
（largura também é 300px, altura é 100px).

Os dois elementos <div> acima apresentam tamanhos diferentes no resultado final (porque o div2 especificou o preenchimento):

Exemplo

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Experimente você mesmo

box-sizing A propriedade resolve esse problema.

Se usarmos a propriedade CSS box-sizing

box-sizing A propriedade permite que incluímos o preenchimento e a borda no total da largura e altura do elemento.

Se definirmos uma propriedade no elemento box-sizing: border-box;Se definirmos a largura e altura, então a largura e altura incluirão o preenchimento e a borda:

Agora os dois divs têm o mesmo tamanho!
Hooray!

Este exemplo é idêntico ao anterior, os dois elementos <div> configuraram box-sizing: border-box;:

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;
}

Experimente você mesmo

Devido ao uso box-sizing: border-box; a eficácia é tão boa, muitos desenvolvedores desejam que todos os elementos na página funcionem dessa maneira.

O código abaixo garante que todos os elementos sejam ajustados de maneira mais intuitiva. Muitos navegadores já estão usando box-sizing: border-box;（mas não todos - isso é por que input e textarea têm um aspecto diferente quando width: 100%;）。

Aplicá-lo a todos os elementos é seguro e inteligente:

Exemplo

* {
  box-sizing: border-box;
}

Experimente você mesmo

Propriedade Box Sizing CSS

Atributo Descrição
box-sizing Definir o cálculo da largura e da altura dos elementos: se eles devem incluir margem interna (padding) e borda.