box-sizing

css

No modelo "box-model" do CSS o tamanho real que um elemento possui consiste na soma do espaço de seu conteúdo + padding + border.

A propriedade box-sizing permite alterar esse cálculo para incorporar o padding e border no tamanho do elemento. No exemplo abaixo, vemos que o width da primeira box é 340px, enquanto o da segunda é 300px.

padrão: content-box

340 x 180

width: 300px; box-sizing: content-box width real: height real:

com border-box

300 x 140

width: 300px; box-sizing: border-box width real: height real: